<template>
|
<view class="u-canvas"
|
:id="rootId"
|
:style="{
|
width: useRootHeightAndWidth ? '100%' : 'auto',
|
height: useRootHeightAndWidth ? '100%' : 'auto',
|
}">
|
<!-- #ifdef MP || H5 -->
|
<canvas
|
class="u-canvas__canvas"
|
:id="canvasId"
|
:canvas-id="canvasId"
|
type="2d"
|
:style="{ width: width + unit, height: height + unit }"
|
@touchstart="onTouchStart"
|
@touchmove="onTouchMove"
|
@touchend="onTouchEnd"/>
|
<!-- #endif -->
|
|
<!-- #ifdef APP-PLUS -->
|
<canvas
|
class="u-canvas__canvas"
|
:id="canvasId"
|
:canvas-id="canvasId"
|
:style="{ width: width + unit, height: height + unit }"
|
@touchstart="onTouchStart"
|
@touchmove="onTouchMove"
|
@touchend="onTouchEnd"/>
|
<!-- #endif -->
|
|
<!-- #ifdef APP-NVUE -->
|
<gcanvas class="u-canvas__canvas" ref="gcanvess"
|
:style="{ width: width + unit, height: height + unit }"
|
@touchstart="onTouchStart"
|
@touchmove="onTouchMove"
|
@touchend="onTouchEnd">
|
</gcanvas>
|
<!-- #endif -->
|
</view>
|
</template>
|
|
<script>
|
// #ifdef APP-NVUE
|
// https://github.com/dcloudio/NvueCanvasDemo/blob/master/README.md
|
import {
|
enable,
|
WeexBridge,
|
Image as GImage
|
} from '../../libs/util/gcanvas/index.js';
|
// #endif
|
let canvasNode = null;
|
export default {
|
name: "u-canvas",
|
props: {
|
canvasId: {
|
type: String,
|
default: () => {
|
return `u-canvas${Math.floor(Math.random() * 1000000)}`
|
}
|
},
|
width: {
|
type: [String, Number],
|
default: 300
|
},
|
height: {
|
type: [String, Number],
|
default: 300
|
},
|
unit: {
|
type: String,
|
default: 'px'
|
},
|
useRootHeightAndWidth: {
|
type: Boolean,
|
default: false
|
},
|
// 背景色
|
bgColor: {
|
type: String,
|
default: '#ffffff'
|
}
|
},
|
data() {
|
return {
|
rootId: `rootId${Number(Math.random() * 100).toFixed(0)}`,
|
ganvas: null,
|
canvasContext: null,
|
widthLocal: this.width,
|
heightLocal: this.height,
|
ctx: null
|
};
|
},
|
computed: {
|
// 计算实际画布尺寸
|
actualWidth() {
|
return this.useRootHeightAndWidth ? this.widthLocal : Number(this.width);
|
},
|
actualHeight() {
|
return this.useRootHeightAndWidth ? this.heightLocal : Number(this.height);
|
}
|
},
|
methods: {
|
// 添加触摸事件处理方法
|
onTouchStart(e) {
|
this.$emit('touchstart', e);
|
},
|
onTouchMove(e) {
|
this.$emit('touchmove', e);
|
},
|
onTouchEnd(e) {
|
this.$emit('touchend', e);
|
},
|
|
/**
|
* 获取节点
|
* @param id 节点id
|
* @param isCanvas 是否为Canvas节点
|
* @return {Promise<unknown>}
|
*/
|
async getCanvasNode(id, isCanvas = true) {
|
let that = this
|
return new Promise((resolve, reject) => {
|
try {
|
// #ifdef APP-NVUE
|
setTimeout(() => {
|
/*获取元素引用*/
|
this.ganvas = this.$refs["gcanvess"]
|
/*通过元素引用获取canvas对象*/
|
let canvasNode = enable(this.ganvas, {
|
bridge: WeexBridge
|
})
|
resolve(canvasNode)
|
}, 200)
|
// #endif
|
// #ifndef APP-PLUS-NVUE
|
const query = uni.createSelectorQuery().in(that).select(`#${id}`);
|
query.fields({
|
node: true,
|
size: true
|
})
|
.exec((res) => {
|
if (isCanvas) {
|
if (res[0]?.node) {
|
resolve(res[0].node)
|
} else {
|
resolve(false)
|
console.error("获取节点出错", res)
|
}
|
} else {
|
resolve(res[0])
|
}
|
})
|
// #endif
|
} catch (e) {
|
console.error("获取节点失败", e)
|
}
|
})
|
},
|
|
/**
|
* 获取Canvas上下文
|
*/
|
getCanvasContext() {
|
// #ifdef APP-PLUS
|
return uni.createCanvasContext(this.canvasId, this);
|
// #endif
|
// #ifdef APP-PLUS-NVUE || MP || H5
|
return canvasNode.getContext('2d');
|
// #endif
|
},
|
|
/**
|
* 初始化Canvas
|
*/
|
async initCanvas() {
|
try {
|
canvasNode = await this.getCanvasNode(this.canvasId);
|
|
// #ifdef MP-WEIXIN
|
// 在微信小程序中，为了提高清晰度，需要考虑设备像素比
|
const dpr = uni.getSystemInfoSync().pixelRatio;
|
if(canvasNode) {
|
// 设置canvas实际绘制尺寸为显示尺寸的dpr倍
|
canvasNode.width = this.actualWidth * dpr;
|
canvasNode.height = this.actualHeight * dpr;
|
}
|
// #endif
|
|
this.ctx = this.getCanvasContext();
|
|
// #ifdef MP-WEIXIN
|
if(this.ctx) {
|
this.ctx.scale(dpr, dpr);
|
}
|
// #endif
|
|
// 初始化背景，但不在微信小程序中调用draw
|
this.clearCanvas();
|
} catch (error) {
|
console.error("初始化Canvas失败:", error);
|
}
|
},
|
|
/**
|
* 清空画布
|
*/
|
clearCanvas() {
|
if (!this.ctx) return;
|
|
this.clearRect(0, 0, this.actualWidth, this.actualHeight);
|
|
// 填充背景色
|
this.beginPath();
|
this.rect(0, 0, this.actualWidth, this.actualHeight);
|
|
this.setFillStyle(this.bgColor);
|
this.fill();
|
|
this.draw();
|
},
|
rect(x, y, width, height) {
|
if (!this.ctx) return;
|
this.ctx.rect(x, y, width, height);
|
},
|
clearRect(x, y, width, height) {
|
if (!this.ctx) return;
|
this.ctx.clearRect(x, y, width, height);
|
},
|
fill() {
|
if (!this.ctx) return;
|
this.ctx.fill();
|
},
|
setFillStyle(color) {
|
if (!this.ctx) return;
|
|
// #ifndef APP-PLUS-NVUE
|
if (this.ctx.setFillStyle) {
|
this.ctx.setFillStyle(color);
|
} else {
|
this.ctx.fillStyle = color;
|
}
|
// #endif
|
// #ifdef APP-PLUS-NVUE
|
this.ctx.setFillStyle(color);
|
// #endif
|
},
|
|
/**
|
* 设置线条样式
|
*/
|
setLineStyle(lineColor, lineWidth) {
|
if (!this.ctx) return;
|
this.setLineCap('round');
|
this.setLineJoin('round');
|
this.setStrokeStyle(lineColor);
|
this.setLineWidth(lineWidth);
|
},
|
setLineCap(lineCap = 'round') {
|
if (!this.ctx) return;
|
if (this.ctx.setLineCap) {
|
this.ctx.setLineCap(lineCap);
|
} else {
|
this.ctx.lineCap = lineCap;
|
}
|
},
|
setLineJoin(lineJoin = 'round') {
|
if (!this.ctx) return;
|
if (this.ctx.setLineJoin) {
|
this.ctx.setLineJoin(lineJoin);
|
} else {
|
this.ctx.lineJoin = lineJoin;
|
}
|
},
|
setStrokeStyle(color) {
|
if (!this.ctx) return;
|
if (this.ctx.setStrokeStyle) {
|
this.ctx.setStrokeStyle(color);
|
} else {
|
this.ctx.strokeStyle = color;
|
}
|
},
|
setLineWidth(width) {
|
if (!this.ctx) return;
|
if (this.ctx.setLineWidth) {
|
this.ctx.setLineWidth(width);
|
} else {
|
this.ctx.lineWidth = width;
|
}
|
},
|
|
/**
|
* 开始路径
|
*/
|
beginPath() {
|
if (!this.ctx) return;
|
this.ctx.beginPath();
|
},
|
|
/**
|
* 移动到某点
|
*/
|
moveTo(x, y) {
|
if (!this.ctx) return;
|
this.ctx.moveTo(x, y);
|
},
|
|
/**
|
* 画线到某点
|
*/
|
lineTo(x, y) {
|
if (!this.ctx) return;
|
this.ctx.lineTo(x, y);
|
},
|
|
/**
|
* 描边
|
*/
|
stroke() {
|
if (!this.ctx) return;
|
this.ctx.stroke();
|
},
|
|
/**
|
* 关闭路径
|
*/
|
closePath() {
|
if (!this.ctx) return;
|
this.ctx.closePath();
|
},
|
|
/**
|
* 绘制操作
|
*/
|
draw(isLastDraw = false) {
|
// #ifndef MP-WEIXIN
|
if (this.ctx && typeof this.ctx.draw === 'function') {
|
this.ctx.draw(isLastDraw);
|
}
|
// #endif
|
},
|
|
/**
|
* 导出图片
|
*/
|
exportImage(fileType = 'png', quality = 1) {
|
return new Promise((resolve, reject) => {
|
// #ifdef MP-WEIXIN
|
// 微信小程序中需要先完成绘制，然后导出图片
|
setTimeout(() => {
|
uni.canvasToTempFilePath({
|
x: 0,
|
y: 0,
|
width: this.actualWidth,
|
height: this.actualHeight,
|
destWidth: this.actualWidth * 2, // 使用双倍尺寸以提高清晰度
|
destHeight: this.actualHeight * 2,
|
canvas: canvasNode, // 2d必须
|
canvasId: this.canvasId,
|
fileType: fileType,
|
quality: quality,
|
success: (res) => {
|
resolve(res.tempFilePath);
|
},
|
fail: (err) => {
|
console.error('导出图片失败:', err);
|
reject(err);
|
}
|
}, this);
|
}, 50); // 等待50毫秒确保绘制完成
|
// #endif
|
|
// #ifndef MP-WEIXIN
|
uni.canvasToTempFilePath({
|
canvas: canvasNode, // 2d必须
|
canvasId: this.canvasId,
|
fileType: fileType,
|
quality: quality,
|
success: (res) => {
|
resolve(res.tempFilePath);
|
},
|
fail: (err) => {
|
console.error('导出图片失败:', err);
|
reject(err);
|
}
|
}, this);
|
// #endif
|
});
|
},
|
|
/**
|
* 使用根节点宽高 设置新的size
|
* @return {Promise<void>}
|
*/
|
async setNewSize(){
|
const rootNode = await this.getCanvasNode(this.rootId, false);
|
const { width , height } = rootNode;
|
this.widthLocal = height;
|
this.heightLocal = width;
|
}
|
},
|
|
async mounted() {
|
// 如果使用根节点的宽高 则 重新设置 size
|
if(this.useRootHeightAndWidth){
|
await this.setNewSize();
|
}
|
|
// 初始化Canvas
|
await this.initCanvas();
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.u-canvas {
|
position: relative;
|
overflow: hidden;
|
}
|
|
.u-canvas__canvas {
|
display: block;
|
}
|
</style>
|
