关于Graffiti

[Lucy]

如果需要麻烦提供个可以复现的完整 demo 给我协助你排查问题

[Mical]

格子大小需要注意 gridSizeX, gridSizeY 和 pixelSizeX, pixelSizeY的设置, 其它上面的问题看了写是业务层数据更新导致重绘, 可以看下 demo https://developer.tuya.com/material/lib ... e=Graffiti, 源码 https://github.com/Tuya-Community/tuya- ... s/Graffiti, 有特殊需求可以基于源码定制

您好! 在这个demo 的基础上,我增加了自己的业务层需求后(除了格子数,其它UI方便保持不变).目前问题减少到只是在编辑旧的画布数据后, 每次涂抹后, 只要修改颜色 缩放或者进入拖动模式, 新的涂抹就会丢失.我现在是在useEffect加载数据的,从打印来看, 这个加载确实只进行了一次. 也成功加载了旧的画布数据.

demo中有这一句打印, console.log('[drawData]:', drawData); 这一句打印每次只打印初始化时候的数据.
为了验证这个猜想, 我屏蔽了useEffect加载数据的代码 ,直接给drawData初始化了一个数据, const [drawData, setDrawData] = useState<any>([{x: 0, y: 0, color: 'rgb(255, 0, 0)'}]);
然后进行绘制 修改颜色测试.没有出现刚才涂抹的问题.坐标0, 0位置的红色也没有丢失.打印也只是打印这唯一的一个坐标点的颜色. 也就是说, 重绘时的丢失, 并不是drawData里面的数据导致的.
也许,绕过useEffect直接给drawData初始化全部数据是个解决办法,但是我尝试过, 这样会导致整个页面渲染不出来---没有报错,就是啥都没显示(我猜是参数过长导致跳转失败什么的)
我看到demo中用到了Decoder ,这个里面调用了setDrawData, 请问哪里可以看到Decoder使用说明.
谢谢!

[Mical]

为了方便您排查, 我将代码进行精简,尽可能保持demo原貌:

1. 增加全局声明:
   const REAL_EFFECT_COLUMN_NUMBER = 20;
   const REAL_EFFECT_LINE_NUMBER = 26;
   const stripes = 1;
   2.代码中增加初始化的代码:
   useEffect(() => {
   console.log('1.useEffect init drawData');
   let array = [];
   for(let y = 0; y < REAL_EFFECT_LINE_NUMBER; y++){
   for(let x = 0; x < stripes*REAL_EFFECT_COLUMN_NUMBER; x++){
   array.push({x, y, color: 'rgb(255, 0, 0)'});
   }
   }
   setDrawData(array);
   }, []);
   3.graffiti增加参数设置:
   gridSizeX={stripes * REAL_EFFECT_COLUMN_NUMBER}
   gridSizeY={REAL_EFFECT_LINE_NUMBER}

其它的不变, 这样就有一个初始化的画布了(全红色).涂抹后修改颜色,就可以看到我上面说的问题了.

在这个demo的基础上, 我中途选择了清除, 然后可以看到, 只是清除了后面的涂抹, 画布显示为初始化的效果.

[Lucy]

这个问题已经修复, 麻烦升级到 v1.1.6版本

[Mical]

谢谢. 更新到最新版本后问题都解决了!