flamingo-ui
Version:
火烈鸟UI组件库
243 lines (242 loc) • 6.42 kB
JavaScript
import { use } from "./_utils/use";
import { h } from "vue";
let _userAgent = navigator.userAgent;
let isIos13Ipad = /Mac OS/gi.test(_userAgent) && !!window.DeviceMotionEvent && !!window.DeviceOrientationEvent;
let PF = {
isMobile: /iphone|ipod|ipad|ipad|Android|nokia|blackberry|webos|webos|webmate|bada|lg|ucweb/i.test(
_userAgent
) || isIos13Ipad
};
let _use = use("scratchcard"), bem = _use[0];
var stdin_default = {
name: "fmg-scratchcard",
props: {
prizeName: {
type: [String],
default: "\u606D\u559C\u4F60\uFF0C\u4E2D\u5956\u5566"
},
width: {
type: [String],
default: "100%"
},
height: {
type: [String],
default: "200px"
},
showScratchOverlay: {
type: [Boolean],
default: true
},
overlayColor: {
type: [String],
default: "#e5e5e5"
},
fontOnOverlay: {
type: [String],
default: "\u522E\u5F00\u67E5\u770B\u5956\u54C1"
},
fontColor: {
type: [String],
default: "#bbb"
},
fontSize: {
type: [String],
default: "20px"
},
OverlayPic: {
type: [String],
default: ""
},
OverlayPicRepeat: {
type: [String],
default: "repeat"
},
//清空临界范围
scope: {
type: [Number],
default: 2
},
//画笔大小
fontem: {
type: [Number],
default: 20
},
canvasParentId: {
type: [String],
default: bem("canvas__parent")
},
canvasId: {
type: [String],
default: bem("canvas__target")
},
slotScoped: {
type: [Function],
default: function() {
}
}
},
data() {
return {
_canvas: "",
//画布
ctx: "",
//画笔
isdown: false,
//标志用户是否按下鼠标或开始触摸
ScratchAll: false,
hadScratched: false
//是否开刮
};
},
methods: {
init() {
if (this.ScratchAll)
this.ScratchAll = false;
this.hadScratched = false;
this.initCanvas();
},
reset() {
this.init();
this.$forceUpdate();
},
// 获取插槽元素
getSlot(name) {
return this.slotScoped && typeof this.slotScoped === "function" && this.slotScoped()[name];
},
// 初始化刮刮卡
initCanvas() {
this.ctx.globalCompositeOperation = "source-over";
let patten = this.overlayColor;
new Promise((resolve) => {
if (this.OverlayPic) {
let _img = new Image();
_img.src = this.OverlayPic;
_img.onload = () => {
patten = this.ctx.createPattern(_img, this.OverlayPicRepeat);
resolve();
};
} else {
resolve();
}
}).then(() => {
this.ctx.fillStyle = patten;
this.ctx.fillRect(
0,
0,
this._canvas.clientWidth,
this._canvas.clientHeight
);
this.ctx.fill();
this.ctx.font = `Bold ${this.fontSize} '\u5FAE\u8F6F\u96C5\u9ED1'`;
this.ctx.textAlign = "center";
this.ctx.fillStyle = this.fontColor;
this.ctx.fillText(
this.fontOnOverlay,
this._canvas.width / 2,
this._canvas.height / 2 + 10
);
this.ctx.globalCompositeOperation = "destination-out";
});
},
touchstart(e) {
e.preventDefault();
this.isdown = true;
this.hadScratched = true;
this.$emit("scratchStart", this.reset);
this.onScratchStart && typeof this.onScratchStart === "function" && this.onScratchStart(this.reset);
},
// 操作刮卡
touchend(e) {
e.preventDefault();
let a = this.ctx.getImageData(
0,
0,
this._canvas.width,
this._canvas.height
);
let j = 0;
for (let i = 3; i < a.data.length; i += 4) {
if (a.data[i] == 0)
j++;
}
this.isdown = false;
this.$emit("scratchEnd", this.reset);
this.onScratchEnd && typeof this.onScratchEnd === "function" && this.onScratchEnd(this.reset);
if (this.hadScratched && j >= a.data.length / (4 * this.scope)) {
this.ScratchAll = true;
this.$emit("scratchAll", this.reset);
this.onScratchAll && typeof this.onScratchAll === "function" && this.onScratchAll(this.reset);
}
},
touchmove(e) {
e.preventDefault();
if (this.isdown) {
if (e.changedTouches) {
e = e.changedTouches[e.changedTouches.length - 1];
}
let ele = document.getElementById(this.canvasParentId);
let leftX = ele.offsetLeft;
let topY = ele.offsetTop;
while (ele = ele.offsetParent) {
leftX += ele.offsetLeft;
topY += ele.offsetTop;
}
let oX = this._canvas.offsetLeft + leftX, oY = this._canvas.offsetTop + topY;
let x = (e.pageX || e.clientX + document.body.scrollLeft) - oX || 0, y = (e.pageY || e.clientY + document.body.scrollTop) - oY || 0;
this.ctx.beginPath();
this.ctx.arc(x, y, this.fontem * 0.8, 0, Math.PI * 2, true);
this.ctx.fill();
}
}
},
mounted() {
if (this.showScratchOverlay) {
setTimeout(() => {
this._canvas = document.getElementById(this.canvasId);
this._canvas.width = this._canvas.clientWidth;
this._canvas.height = this._canvas.clientHeight;
this.ctx = this._canvas.getContext("2d");
this.initCanvas();
}, 0);
}
},
render() {
return h(
"div",
{
class: bem(""),
style: {
width: this.width,
height: this.height
},
id: this.canvasParentId
},
[
this.$slots.prize || this.getSlot("prize") && h(
this.getSlot("prize").tag,
this.getSlot("prize").data,
this.getSlot("prize").text
) || h(
"div",
{
class: bem("prizeinfo")
},
[h("p", {}, this.prizeName.replace(/\\n/g, "<br>"))]
),
this.showScratchOverlay && h("canvas", {
class: bem("canvas"),
id: this.canvasId,
style: {
"z-index": this.ScratchAll ? -1 : 2
},
onTouchstart: this.touchstart,
onTouchmove: this.touchmove,
onTouchend: this.touchend
})
]
);
}
};
export {
stdin_default as default
};