116 lines
3.4 KiB
JavaScript
116 lines
3.4 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../common/vendor.js");
|
|
const _sfc_main = {
|
|
props: {
|
|
width: Number,
|
|
height: Number,
|
|
matrix: Object
|
|
},
|
|
data() {
|
|
return {
|
|
ctx: null,
|
|
canvasWidth: this.width,
|
|
canvasHeight: this.height
|
|
};
|
|
},
|
|
mounted() {
|
|
this.initCanvas();
|
|
},
|
|
methods: {
|
|
initCanvas() {
|
|
this.ctx = common_vendor.index.createCanvasContext("gestureCanvas", this);
|
|
const pixelRatio = common_vendor.index.getSystemInfoSync().pixelRatio;
|
|
this.ctx.scale(pixelRatio, pixelRatio);
|
|
},
|
|
applyTransform(matrix) {
|
|
if (!matrix)
|
|
return;
|
|
const pixelRatio = common_vendor.index.getSystemInfoSync().pixelRatio;
|
|
const tx = matrix.tx * pixelRatio;
|
|
const ty = matrix.ty * pixelRatio;
|
|
this.ctx.setTransform(
|
|
matrix.a,
|
|
matrix.b,
|
|
matrix.c,
|
|
matrix.d,
|
|
tx,
|
|
ty
|
|
);
|
|
},
|
|
// 调试网格
|
|
drawDebugGrid() {
|
|
if (!this.ctx)
|
|
return;
|
|
const pixelRatio = common_vendor.index.getSystemInfoSync().pixelRatio;
|
|
const width = this.canvasWidth * pixelRatio;
|
|
const height = this.canvasHeight * pixelRatio;
|
|
this.ctx.save();
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
this.ctx.strokeStyle = "rgba(200, 200, 200, 0.3)";
|
|
this.ctx.lineWidth = 1;
|
|
for (let y = 0; y <= height; y += 50) {
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(0, y);
|
|
this.ctx.lineTo(width, y);
|
|
this.ctx.stroke();
|
|
}
|
|
for (let x = 0; x <= width; x += 50) {
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(x, 0);
|
|
this.ctx.lineTo(x, height);
|
|
this.ctx.stroke();
|
|
}
|
|
this.ctx.strokeStyle = "#ff0000";
|
|
this.ctx.lineWidth = 2;
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(0, 0);
|
|
this.ctx.lineTo(width, 0);
|
|
this.ctx.stroke();
|
|
this.ctx.beginPath();
|
|
this.ctx.moveTo(0, 0);
|
|
this.ctx.lineTo(0, height);
|
|
this.ctx.stroke();
|
|
this.ctx.restore();
|
|
this.ctx.draw();
|
|
},
|
|
// 绘制主内容
|
|
draw() {
|
|
if (!this.ctx) {
|
|
common_vendor.index.__f__("warn", "at pages/index/transform-canvas.vue:110", "Canvas上下文未初始化");
|
|
return;
|
|
}
|
|
this.clearCanvas();
|
|
this.applyTransform(this.matrix);
|
|
this.drawContent();
|
|
},
|
|
clearCanvas() {
|
|
const pixelRatio = common_vendor.index.getSystemInfoSync().pixelRatio;
|
|
const width = this.canvasWidth * pixelRatio;
|
|
const height = this.canvasHeight * pixelRatio;
|
|
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
|
|
this.ctx.clearRect(0, 0, width, height);
|
|
},
|
|
drawContent() {
|
|
this.ctx.fillStyle = "#3498db";
|
|
this.ctx.fillRect(50, 50, 100, 100);
|
|
this.ctx.fillStyle = "#e74c3c";
|
|
this.ctx.beginPath();
|
|
this.ctx.arc(150, 150, 50, 0, 2 * Math.PI);
|
|
this.ctx.fill();
|
|
this.ctx.fillStyle = "#2c3e50";
|
|
this.ctx.font = "20px sans-serif";
|
|
this.ctx.fillText("手势Canvas", 50, 250);
|
|
this.ctx.draw();
|
|
}
|
|
}
|
|
};
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return {
|
|
a: $data.canvasWidth + "px",
|
|
b: $data.canvasHeight + "px"
|
|
};
|
|
}
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
wx.createComponent(Component);
|
|
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/transform-canvas.js.map
|