<template>
?? ?<view class="main-content" v-if="isShow" @touchmove.stop.prevent="">
?? ??? ?<!-- 簽字canvas -->
?? ??? ?<canvas?
?? ??? ??? ?class="mycanvas"?
?? ??? ??? ?id="mycanvas"?
?? ??? ??? ?canvas-id="mycanvas"?
?? ??? ??? ?@touchstart="touchstart"?
?? ??? ??? ?@touchmove="touchmove"?
?? ??? ??? ?@touchend="touchend"
?? ??? ?></canvas>
?? ??? ?<!-- 旋轉(zhuǎn)canvas -->
?? ??? ?<canvas
?? ??? ??? ?class="mycanvas"
?? ??? ??? ?:style="{ 'z-index': -1, width: `${screenWidth}px`, height: `${(screenWidth * screenWidth) / screenHeight}px` }"
?? ??? ??? ?id="rotatCanvas"
?? ??? ??? ?canvas-id="rotatCanvas"
?? ??? ?></canvas>
?? ??? ?<cover-view class="button-line">
?? ??? ??? ?<cover-view class="save-button" @tap="finish">保存</cover-view>
?? ??? ??? ?<cover-view class="clear-button" @tap="clear">清除</cover-view>
?? ??? ??? ?<cover-view class="cancel-button" @tap="hide">關(guān)閉</cover-view>
?? ??? ?</cover-view>
?? ?</view>
</template>

<script>
export default {
?? ?data() {
?? ??? ?return {
?? ??? ??? ?ctx: '', //繪圖圖像
?? ??? ??? ?points: [], //路徑點(diǎn)集合
?? ??? ??? ?isShow: false,
?? ??? ??? ?screenWidth: '',
?? ??? ??? ?screenHeight: ''
?? ??? ?};
?? ?},
?? ?mounted() {
?? ??? ?this.createCanvas();
?? ??? ?uni.getSystemInfo({
?? ??? ??? ?success: e => {
?? ??? ??? ??? ?this.screenWidth = e.screenWidth;
?? ??? ??? ??? ?this.screenHeight = e.screenHeight;
?? ??? ??? ?}
?? ??? ?});
?? ?},
?? ?methods: {
?? ??? ?show() {
?? ??? ??? ?this.clear();
?? ??? ??? ?this.isShow = true;
?? ??? ?},
?? ??? ?hide() {
?? ??? ??? ?this.isShow = false;
?? ??? ?},
?? ??? ?//創(chuàng)建并顯示畫布
?? ??? ?createCanvas() {
?? ??? ??? ?this.showCanvas = true;
?? ??? ??? ?this.ctx = uni.createCanvasContext('mycanvas', this); //創(chuàng)建繪圖對象
?? ??? ??? ?//設(shè)置畫筆樣式
?? ??? ??? ?this.ctx.lineWidth = 2;
?? ??? ??? ?this.ctx.lineCap = 'round';
?? ??? ??? ?this.ctx.lineJoin = 'round';
?? ??? ?},
?? ??? ?//觸摸開始，獲取到起點(diǎn)
?? ??? ?touchstart(e) {
?? ??? ??? ?let startX = e.changedTouches[0].x;
?? ??? ??? ?let startY = e.changedTouches[0].y;
?? ??? ??? ?let startPoint = {
?? ??? ??? ??? ?X: startX,
?? ??? ??? ??? ?Y: startY
?? ??? ??? ?};
?? ??? ??? ?this.points.push(startPoint);
?? ??? ??? ?//每次觸摸開始，開啟新的路徑
?? ??? ??? ?this.ctx.beginPath();
?? ??? ?},
?? ??? ?//觸摸移動，獲取到路徑點(diǎn)
?? ??? ?touchmove(e) {
?? ??? ??? ?let moveX = e.changedTouches[0].x;
?? ??? ??? ?let moveY = e.changedTouches[0].y;
?? ??? ??? ?let movePoint = {
?? ??? ??? ??? ?X: moveX,
?? ??? ??? ??? ?Y: moveY
?? ??? ??? ?};
?? ??? ??? ?this.points.push(movePoint); //存點(diǎn)
?? ??? ??? ?let len = this.points.length;
?? ??? ??? ?if (len >= 2) {
?? ??? ??? ??? ?this.draw(); //繪制路徑
?? ??? ??? ?}
?? ??? ?},
?? ??? ?// 觸摸結(jié)束，將未繪制的點(diǎn)清空防止對后續(xù)路徑產(chǎn)生干擾
?? ??? ?touchend() {
?? ??? ??? ?this.points = [];
?? ??? ?},
?? ??? ?/* ***********************************************
?? ??? ??? ?# ? 繪制筆跡
?? ??? ??? ?#?? ?1.為保證筆跡實(shí)時顯示，必須在移動的同時繪制筆跡
?? ??? ??? ?#?? ?2.為保證筆跡連續(xù)，每次從路徑集合中區(qū)兩個點(diǎn)作為起點(diǎn)（moveTo）和終點(diǎn)(lineTo)
?? ??? ??? ?#?? ?3.將上一次的終點(diǎn)作為下一次繪制的起點(diǎn)（即清除第一個點(diǎn)）
?? ??? ??? ?************************************************ */
?? ??? ?draw() {
?? ??? ??? ?let point1 = this.points[0];
?? ??? ??? ?let point2 = this.points[1];
?? ??? ??? ?this.points.shift();
?? ??? ??? ?this.ctx.moveTo(point1.X, point1.Y);
?? ??? ??? ?this.ctx.lineTo(point2.X, point2.Y);
?? ??? ??? ?this.ctx.stroke();
?? ??? ??? ?this.ctx.draw(true);
?? ??? ?},
?? ??? ?//清空畫布
?? ??? ?clear() {
?? ??? ??? ?this.ctx.clearRect(0, 0, this.screenWidth, this.screenHeight);
?? ??? ??? ?this.ctx.draw(true);
?? ??? ?},
?? ??? ?//完成繪畫并保存到本地
?? ??? ?finish() {
?? ??? ??? ?uni.canvasToTempFilePath(
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?canvasId: 'mycanvas',
?? ??? ??? ??? ??? ?success: res => {
?? ??? ??? ??? ??? ??? ?this.rotat(res.tempFilePath);
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?complete: com => {}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?this
?? ??? ??? ?);
?? ??? ?},
?? ??? ?// 將圖片選裝
?? ??? ?rotat(e) {
?? ??? ??? ?let rotatCtx = uni.createCanvasContext('rotatCanvas', this); //創(chuàng)建繪圖對象
?? ??? ??? ?// 重新定位中心點(diǎn)
?? ??? ??? ?rotatCtx.translate(0, (this.screenWidth * this.screenWidth) / this.screenHeight);
?? ??? ??? ?// 將畫布逆時針旋轉(zhuǎn)90度
?? ??? ??? ?rotatCtx.rotate((270 * Math.PI) / 180);
?? ??? ??? ?// 將簽字圖片繪制進(jìn)入Canvas
?? ??? ??? ?rotatCtx.drawImage(e, 0, 0, (this.screenWidth * this.screenWidth) / this.screenHeight, this.screenWidth);
?? ??? ??? ?// 保存后旋轉(zhuǎn)后的結(jié)果
?? ??? ??? ?rotatCtx.draw(true);
?? ??? ??? ?setTimeout(() => {
?? ??? ??? ??? ?// 生成圖片并回調(diào)
?? ??? ??? ??? ?uni.canvasToTempFilePath(
?? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ?canvasId: 'rotatCanvas',
?? ??? ??? ??? ??? ??? ?success: val => {
?? ??? ??? ??? ??? ??? ??? ?this.$emit('tempFilePath', val.tempFilePath);
?? ??? ??? ??? ??? ??? ??? ?setTimeout(() => {
?? ??? ??? ??? ??? ??? ??? ??? ?this.hide();
?? ??? ??? ??? ??? ??? ??? ?}, 500);
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ?complete: com => {
?? ??? ??? ??? ??? ??? ??? ?// console.log(com);
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ?this
?? ??? ??? ??? ?);
?? ??? ??? ?}, 500);
?? ??? ?}
?? ?}
};
</script>

<style lang="scss" scoped>
.main-content {
?? ?width: 100vw;
?? ?height: 100vh;
?? ?background-color: red;
?? ?position: fixed;
?? ?top: 0rpx;
?? ?left: 0rpx;
?? ?z-index: 9999;
}
.mycanvas {
?? ?width: 100vw;
?? ?height: 100vh;
?? ?background-color: #efefef;
?? ?position: fixed;
?? ?left: 0rpx;
?? ?top: 0rpx;
?? ?z-index: 2;
}
.button-line {
?? ?transform: rotate(90deg);
?? ?position: fixed;
?? ?bottom: 170rpx;
?? ?left: -100rpx;
?? ?width: 340rpx;
?? ?height: 50rpx;
?? ?display: flex;
?? ?align-items: center;
?? ?justify-content: space-between;
?? ?z-index: 999;
}
.button-style {
?? ?color: #ffffff;
?? ?width: 100rpx;
?? ?height: 60rpx;
?? ?text-align: center;
?? ?line-height: 60rpx;
?? ?border-radius: 10rpx;
}
.save-button {
?? ?@extend .button-style;
?? ?background-color: #02b340;
}
.clear-button {
?? ?@extend .button-style;
?? ?background-color: #ffa500;
}
.cancel-button {
?? ?@extend .button-style;
?? ?background-color: #e10b2b;
}
</style>