zhangyi
96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
Page({
|
|
canvas: null as WechatMiniprogram.Canvas | null,
|
|
ctx: null as CanvasRenderingContext2D | null,
|
|
|
|
data: {
|
|
showModal: false,
|
|
texts: ['', '', '', ''],
|
|
},
|
|
|
|
onReady: function () {
|
|
this.initCanvas();
|
|
},
|
|
|
|
initCanvas() {
|
|
const query = wx.createSelectorQuery();
|
|
query
|
|
.select('#textCanvas')
|
|
.fields({ node: true, size: true })
|
|
.exec((res) => {
|
|
console.log('res----:', res);
|
|
const canvas = res[0].node;
|
|
const ctx = canvas.getContext('2d');
|
|
this.canvas = canvas;
|
|
this.ctx = ctx;
|
|
const dpi = 300; // 明确声明 DPI
|
|
const mmToInch = 25.4;
|
|
const width = (210 / mmToInch) * dpi; // 2480px
|
|
const height = (297 / mmToInch) * dpi; // 3508px
|
|
const pixelRatio = wx.getWindowInfo().pixelRatio;
|
|
|
|
// 设置画布实际像素为 A4 尺寸
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
|
|
// 适配屏幕显示（非必须，仅用于预览）
|
|
canvas.style = canvas.style || {};
|
|
canvas.style.width = `${width / pixelRatio}px`;
|
|
canvas.style.height = `${height / pixelRatio}px`;
|
|
|
|
// 缩放上下文以适配高清屏
|
|
ctx.scale(pixelRatio, pixelRatio);
|
|
this.drawCircles();
|
|
});
|
|
},
|
|
|
|
setCanvasSize() {},
|
|
|
|
drawCircles: function () {
|
|
if (!this.canvas) {
|
|
return;
|
|
}
|
|
const ctx = this.ctx as CanvasRenderingContext2D;
|
|
const { texts } = this.data;
|
|
|
|
// 清空画布
|
|
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
// 绘制4个圆圈
|
|
for (let i = 0; i < 4; i++) {
|
|
const x = 50 + i * 100;
|
|
const y = 50;
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 40, 0, 2 * Math.PI);
|
|
ctx.fillStyle = 'white';
|
|
ctx.fill();
|
|
ctx.strokeStyle = 'black';
|
|
ctx.stroke();
|
|
|
|
if (texts[i]) {
|
|
ctx.fillStyle = 'black';
|
|
ctx.font = '20px sans-serif';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'middle';
|
|
ctx.fillText(texts[i], x, y);
|
|
}
|
|
}
|
|
},
|
|
|
|
showInput: function () {
|
|
this.setData({ showModal: true });
|
|
},
|
|
|
|
updateText: function (e: WechatMiniprogram.CustomEvent) {
|
|
const index = e.currentTarget.dataset.index;
|
|
const value = e.detail.value;
|
|
const { texts } = this.data;
|
|
texts[index] = value;
|
|
this.setData({ texts });
|
|
},
|
|
|
|
confirmInput: function () {
|
|
this.setData({ showModal: false });
|
|
this.drawCircles();
|
|
},
|
|
});
|