You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.6 KiB
142 lines
3.6 KiB
|
|
class Scratch {
|
|
constructor (page, opts) {
|
|
opts = opts || {}
|
|
console.log(page, '-------');
|
|
this.page = page
|
|
this.canvasId = opts.canvasId || 'canvas'
|
|
this.width = opts.width || 330
|
|
this.height = opts.height || 300
|
|
this.screenWidth = opts.screenWidth || 375
|
|
// this.maskColor = opts.maskColor || '#D2D2D2'
|
|
// this.maskColor = '#dddddd'
|
|
this.maskColor = 'transparent';
|
|
this.size = opts.size || 10
|
|
this.r = this.size * 2
|
|
this.area = this.r * this.r
|
|
this.scale = opts.scale || 0.3
|
|
this.totalArea = this.width * this.height
|
|
this.bgImg = opts.bgImg
|
|
this.show = false
|
|
this.codeType = opts.codeType
|
|
this.direction = opts.direction;//号码行数
|
|
this.transverse = opts.transverse;//每行个数
|
|
this.init()
|
|
}
|
|
|
|
init () {
|
|
|
|
this.clearPoints = []
|
|
this.ctx = uni.createCanvasContext(this.canvasId)
|
|
this.drawMask()
|
|
this.bindTouch()
|
|
}
|
|
|
|
drawMask () {
|
|
let sx, sy, swidth, sheight, x, y, width, height;
|
|
// 底图是像素1080的宽
|
|
|
|
swidth = this.width*1080/this.screenWidth;//被剪切图像的宽度
|
|
sheight = this.height*1080/this.screenWidth;//被剪切图像的高度
|
|
x = 0;//在画布上放置图像的 x 坐标位置(从画布的左上顶点开始绘制)
|
|
y = 0;
|
|
width = this.width;//要使用的图像的宽度
|
|
height = this.height;
|
|
|
|
|
|
if(this.codeType==='digit_number_icon'){//888
|
|
sy = 927;//开始剪切的 y 坐标位置
|
|
if(this.canvasId=='guaguaLeft'){
|
|
sx = 65;
|
|
}
|
|
if(this.canvasId=='guaguaRight'){
|
|
sx = 512;
|
|
}
|
|
|
|
}
|
|
|
|
console.log(sx, sy, swidth, sheight, x, y, width, height);
|
|
// 数字计算的稍微会偏0.00几像素
|
|
this.ctx.drawImage(this.bgImg, sx, sy, swidth, sheight, x, y, width, height);
|
|
// this.ctx.drawImage(this.bgImg, 64.8, 720, 950.4, 864, 0, 0, 330, 300);
|
|
this.ctx.setFillStyle(this.maskColor)
|
|
this.ctx.fillRect(0, 0, this.width, this.height)
|
|
this.ctx.draw()
|
|
}
|
|
|
|
bindTouch () {
|
|
this.page.touchStart = (e) => {
|
|
this.eraser(e, true)
|
|
}
|
|
this.page.touchMove = (e) => {
|
|
this.eraser(e, false)
|
|
}
|
|
this.page.touchEnd = (e) => {
|
|
if (this.show) {
|
|
this.ctx.clearRect(0, 0, this.width, this.height)
|
|
this.ctx.draw()
|
|
// console.log('刮奖面积达标');
|
|
}
|
|
}
|
|
}
|
|
|
|
eraser (e, bool) {
|
|
const len = this.clearPoints.length
|
|
let count = 0
|
|
const x = e.touches[0].x; const y = e.touches[0].y
|
|
const x1 = x - this.size
|
|
const y1 = y - this.size
|
|
if (bool) {
|
|
this.clearPoints.push({
|
|
x1: x1,
|
|
y1: y1,
|
|
x2: x1 + this.r,
|
|
y2: y1 + this.r
|
|
})
|
|
}
|
|
for (const item of this.clearPoints) {
|
|
if (item.x1 > x || item.y1 > y || item.x2 < x || item.y2 < y) {
|
|
count++
|
|
} else {
|
|
break
|
|
}
|
|
}
|
|
if (len === count) {
|
|
this.clearPoints.push({
|
|
x1: x1,
|
|
y1: y1,
|
|
x2: x1 + this.r,
|
|
y2: y1 + this.r
|
|
})
|
|
}
|
|
if (len && this.r * this.r * len > this.scale * this.totalArea) {
|
|
this.show = true;
|
|
// console.log('刮奖面积达标');
|
|
}
|
|
this.clearArcFun(x, y, this.r, this.ctx)
|
|
this.ctx.draw(true);
|
|
}
|
|
|
|
clearArcFun (x, y, r, ctx) {
|
|
let stepClear = 1
|
|
clearArc(x, y, r)
|
|
function clearArc (x, y, radius) {
|
|
const calcWidth = radius - stepClear
|
|
const calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth)
|
|
|
|
const posX = x - calcWidth
|
|
const posY = y - calcHeight
|
|
|
|
const widthX = 2 * calcWidth
|
|
const heightY = 2 * calcHeight
|
|
|
|
if (stepClear <= radius) {
|
|
ctx.clearRect(posX, posY, widthX, heightY)
|
|
stepClear += 1
|
|
clearArc(x, y, radius)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export default Scratch
|