zhangyi
55 lines
1.3 KiB
JavaScript
55 lines
1.3 KiB
JavaScript
Page({
|
|
data: {
|
|
showModal: false,
|
|
texts: ['', '', '', ''],
|
|
},
|
|
|
|
onReady: function () {
|
|
this.drawCircles();
|
|
},
|
|
|
|
drawCircles: function () {
|
|
const ctx = wx.createCanvasContext('myCanvas');
|
|
const { texts } = this.data;
|
|
|
|
// 绘制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.setFillStyle('white');
|
|
ctx.fill();
|
|
ctx.setStrokeStyle('black');
|
|
ctx.stroke();
|
|
|
|
if (texts[i]) {
|
|
ctx.setFillStyle('black');
|
|
ctx.setFontSize(20);
|
|
ctx.setTextAlign('center');
|
|
ctx.setTextBaseline('middle');
|
|
ctx.fillText(texts[i], x, y);
|
|
}
|
|
}
|
|
|
|
ctx.draw();
|
|
},
|
|
|
|
showInput: function () {
|
|
this.setData({ showModal: true });
|
|
},
|
|
|
|
updateText: function (e) {
|
|
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();
|
|
},
|
|
});
|