@ray-js/pencil-flow 在绘制canvas的时候渲染了两个灯珠,当我update更新成一个灯珠的时候会多一个灯珠的边框出来,实际上是只执行一次方法,demo中的smearLightColorMaps数据类型和https://developer.tuya.com/material/library_oHEKLjj0/component?code=ComponentsTyLamp&subCode=LampStripLightSmear组件的一样
这个是出现的bug
renderRoundLights(stage, ctx, data) { 在这里下面打印看看 data 的个数和数据结构
1个改成N个没问题,N改成1就会有问题, N改成2不会,具体是什么原因分析不出来,data长度也对
在 Line.js 存在多余的 ctx.stroke(); 需要将这个放在if 中， 代码如下 draw() {
this.clear();
const { data: data } = this;
if (!data) {
return;
}
const { y, idx, endX, col, radius, isEvenRow, lightNum } = _data;
const ctx = this;
if ((idx === 0 || idx % col < col - 1) && lightNum !== idx + 1) {
if (isEvenRow) {
ctx.beginPath();
ctx.strokeStyle(LINE_COLOR);
ctx.lineWidth(2);
ctx.moveTo(endX + radius, y);
ctx.lineTo(endX + radius + offsetDistance, y);
ctx.stroke();
} else {
ctx.beginPath();
ctx.strokeStyle(LINE_COLOR);
ctx.lineWidth(2);
ctx.moveTo(endX - radius, y);
ctx.lineTo(endX - (radius + offsetDistance), y);
ctx.stroke();
}
}
if (((idx + 1) / col) % 2 === 1 && lightNum !== idx + 1) {
ctx.beginPath();
ctx.strokeStyle(LINE_COLOR);
ctx.beginPath();
ctx.lineWidth(2);
const arcRadius = (radius * 2.5) / 2;
ctx.arc(endX + radius, y + (radius * 2.5) / 2, arcRadius, Math.PI * 1.5, Math.PI * 0.5);
ctx.stroke();
}
if (((idx + 1) / col) % 2 === 0 && lightNum !== idx + 1) {
ctx.beginPath();
ctx.strokeStyle(LINE_COLOR);
ctx.beginPath();
ctx.lineWidth(2);
const arcRadius = (radius * 2.5) / 2;
ctx.arc(endX - radius, y + (radius * 2.5) / 2, arcRadius, Math.PI * 0.5, Math.PI * 1.5);
ctx.stroke();
}
}
Line类应该不会影响到Round类,只要绘制圆形的时候才会出现这个问题,Slider中有一个圆形按钮我显示后动态隐藏,更新canvas,哪个圆形按钮还是存在边框
多余绘制一次 ctx.stroke(); 你按照我说的先试试
还真是被干扰到了,谢谢了