193 lines
5.8 KiB
Vue
193 lines
5.8 KiB
Vue
<template>
|
||
<view class="" v-if="istrue">
|
||
<view class="content">
|
||
<view class="value" v-show="readyState">{{good}}</view>
|
||
<canvas :style="{'width':width+'rpx','height':height+'rpx'}" canvas-id="myCanvas" id="myCanvas"
|
||
@touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
|
||
</canvas>
|
||
</view>
|
||
<!-- <button @click="reset">重置</button> -->
|
||
<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
ctx: null,
|
||
width: 556,
|
||
height: 292,
|
||
disabled: false, // 是否禁止刮卡
|
||
readyState: false, // 是否开始绘制
|
||
endState: false, // 结束刮卡状态
|
||
|
||
watermark: '刮一刮', // 水印文字
|
||
watermarkColor: '#c5c5c5', // 水印文字颜色
|
||
watermarkSize: 14, // 水印文字大小
|
||
title: '快来刮我', // 提示文字
|
||
titleColor: '#888', // 提示文字颜色
|
||
titleSize: 24, // 提示文字大小
|
||
|
||
startX: 0, // 触摸x轴位置
|
||
startY: 0, // 触摸y轴位置
|
||
touchSize: 20, // 触摸画笔大小
|
||
percentage: 20, // 刮开百分之多少的时候开奖
|
||
prizeList: [],
|
||
istrue: true,
|
||
good: uni.getStorageSync('good'),
|
||
good2: uni.getStorageSync('good2'),
|
||
pid: uni.getStorageSync('pid'),
|
||
noq: false
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
let content = uni.createSelectorQuery().select(".content");
|
||
this.ctx = uni.createCanvasContext('myCanvas', this);
|
||
setTimeout(e => {
|
||
this.init();
|
||
}, 20);
|
||
})
|
||
|
||
},
|
||
methods: {
|
||
init() {
|
||
this.endState = false;
|
||
this.readyState = false;
|
||
this.ctx.clearRect(0, 0, this.width, this.height); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。
|
||
this.ctx.setFillStyle('#ddd'); // 填充颜色
|
||
this.ctx.fillRect(0, 0, this.width, this.height); // 填充区域（x,y,宽,高）
|
||
/**
|
||
* 绘制文字水印
|
||
*/
|
||
var width = this.watermark.length * this.watermarkSize;
|
||
this.ctx.save(); // 保存当前的绘图上下文。
|
||
this.ctx.rotate(-10 * Math.PI / 180); // 以原点为中心，原点可以用 translate方法修改。顺时针旋转当前坐标轴。多次调用rotate，旋转的角度会叠加。
|
||
let x = 0;
|
||
let y = 0;
|
||
let i = 0;
|
||
while ((x <= this.width * 5 || y <= this.height * 5) && i < 300) {
|
||
this.ctx.setFillStyle(this.watermarkColor); // 填充颜色
|
||
this.ctx.setFontSize(this.watermarkSize); // 设置字体的字号
|
||
this.ctx.fillText(this.watermark, x, y); // 填充的文本（文字，x，y）
|
||
x += width + width * 1.6;
|
||
if (x > this.width && y <= this.height) {
|
||
x = -Math.random() * 100;
|
||
y += this.watermarkSize * 3;
|
||
}
|
||
i++;
|
||
}
|
||
this.ctx.restore(); // 恢复之前保存的绘图上下文。
|
||
|
||
/**
|
||
* 绘制标题
|
||
*/
|
||
this.ctx.setTextAlign("center"); // 用于设置文字的对齐
|
||
this.ctx.setTextBaseline("middle"); // 用于设置文字的水平对齐
|
||
this.ctx.setFillStyle(this.titleColor); // 填充颜色
|
||
this.ctx.setFontSize(this.titleSize); // 设置字体的字号
|
||
this.ctx.fillText(this.title, this.width / 4, this.height / 4); // 填充的文本（文字，x，y）
|
||
|
||
this.ctx.draw(); // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
|
||
this.readyState = true; // 完成绘制
|
||
},
|
||
|
||
|
||
// 手指触摸动作开始
|
||
touchstart(e) {
|
||
if (this.disabled || this.endState) {
|
||
return;
|
||
}
|
||
this.startX = e.touches[0].x;
|
||
this.startY = e.touches[0].y;
|
||
},
|
||
// 手指触摸后移动
|
||
touchmove(e) {
|
||
if (this.disabled || this.endState) {
|
||
return;
|
||
}
|
||
this.ctx.clearRect(this.startX, this.startY, this.touchSize, this.touchSize); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。
|
||
this.ctx.draw(true); // false:本次绘制是否接着上一次绘制，true:保留当前画布上的内容
|
||
//记录移动点位
|
||
this.startX = e.touches[0].x;
|
||
this.startY = e.touches[0].y;
|
||
},
|
||
// 手指触摸动作结束
|
||
touchend(e) {
|
||
if (this.disabled || this.endState) {
|
||
return;
|
||
}
|
||
// 返回一个数组，用来描述 canvas 区域隐含的像素数据，在自定义组件下，第二个参数传入自定义组件实例 this，以操作组件内 <canvas> 组件。
|
||
uni.canvasGetImageData({
|
||
canvasId: 'myCanvas',
|
||
x: 0,
|
||
y: 0,
|
||
width: this.width,
|
||
height: this.height,
|
||
success: (res) => {
|
||
console.log(res);
|
||
let pixels = res.data;
|
||
let transPixels = [];
|
||
for (let i = 0; i < pixels.length; i += 4) {
|
||
if (pixels[i + 3] < 128) {
|
||
transPixels.push(pixels[i + 3]);
|
||
}
|
||
}
|
||
var percent = (transPixels.length / (pixels.length / 4) * 100).toFixed(2);
|
||
if (percent >= this.percentage) {
|
||
this.success();
|
||
}
|
||
},
|
||
fail: (e) => {
|
||
console.log(e);
|
||
},
|
||
}, this);
|
||
},
|
||
|
||
// 成功，清除所有图层
|
||
success: function(e) {
|
||
if (this.endState) {
|
||
return;
|
||
}
|
||
this.endState = true;
|
||
this.ctx.moveTo(0, 0); // 把路径移动到画布中的指定点，不创建线条。用 stroke() 方法来画线条。
|
||
this.ctx.clearRect(0, 0, this.width, this.height); // 清除画布上在该矩形区域内的内容(x,y,宽，高)。
|
||
this.ctx.stroke(); // 画出当前路径的边框。默认颜色色为黑色。
|
||
this.ctx.draw(true);
|
||
this.$emit("zhong", this.good2)
|
||
},
|
||
// 重置
|
||
reset() {
|
||
this.init();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
width: 790rpx;
|
||
height: 120rpx;
|
||
margin: auto;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.value {
|
||
color: #FA562B;
|
||
font-size: 45rpx;
|
||
font-weight: bold;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|