3 changed files with 37 additions and 152 deletions
@ -1,142 +0,0 @@ |
|||||
|
|
||||
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 |
|
||||
Loading…
Reference in new issue