关于Graffiti

[Mical]

最近我的项目用到了Graffiti这个Ray组件, 挺好的,当然,也跟我预期的有差异:
第一个差异,我们的产品支持分组功能,也就是几个点阵涂抹产品拼接在一起使用.
当Graffiti的横向格子数由20变成 60时,显然,如果不改变格子的大小的话, 画布肯定会超出屏幕宽度.
于是,我在最外层套了一个ScrollView, 让它支持横向滚动.尴尬的是, ScrollView的滚动条不显示, 拖动画布的时候,能看到超出屏幕范围的内容, 但是同时,格子也在被涂抹.问了一下AI助手, ScrollView好像没有办法限制不通过内容拖动, 也就是说如果Graffiti的宽超出屏幕范围的话,要在Graffiti里面设置拖动模式(这个模式下禁止涂抹).这个应该是最佳解决办法.因为ScrollView的滚动条也没办法设置显示出来啊.
第二个差异.我们的产品是要支持对现有的画布涂鸦数据进行二次编辑的.但是Graffiti的接口里面并没有参数支持对格子的颜色进行初始化.这个很要命,希望能尽快安排上.
另外,我有留意到, 保存的数据是截图的Base64编码字符串. 嗯, 我们需求的是每个格子的RGB数据(发送给设备的), 我记得在写RN 程序的时候(这个项目就是从RN升级来的),只有原生RN程序支持从图片中获取指定像素位置的颜色值. 封装后的平台里面并没有这个接口. 我不知道现在的平台有没有办法从图片(把Base64编码字符串转为图片)中获取指定像素位置的颜色值.如果有,请一并告诉我,,,,嗯, 如果没有的话, 还是得Graffiti提供另外一个保存接口----返回每个格子的颜色值.

[Lucy]

1. Graffiti 会尽快支持缩放功能, 另外会增加一个是否禁用涂抹的属性
2. 目前已经是支持了入参初始值 drawData , 类型: { x: number; y: number; color: string; }[]
3. 通过从 Base64图片中是可以自己获取指定像素位置的颜色值, canvas 读取图片base64, 然后通过 ctx.getImageData 获取

[Mical]

1. Graffiti 会尽快支持缩放功能, 另外会增加一个是否禁用涂抹的属性
2. 目前已经是支持了入参初始值 drawData , 类型: { x: number; y: number; color: string; }[]
3. 通过从 Base64图片中是可以自己获取指定像素位置的颜色值, canvas 读取图片base64, 然后通过 ctx.getImageData 获取

谢谢! 期待你们的新功能上线! 我又仔细查看了一下物料市场上有关Graffiti的使用介绍.接口栏最后一项确实提到了drawData这个接口.但是我在项目中查看
Graffiti的接口文档,没有找到这个接口,请确认一下是不是包含这个接口的版本没有发布.

[Lucy]

1.1.4版本已经支持1. 传入初始数据 drawData, 2. 画布缩放,拖动 3. 保存时透出每格颜色, 4. 支持画布禁用

[Mical]

谢谢, 昨天看到组件更新后就立即更新了项目依赖.
目前已经使用了 1. 传入初始数据 drawData 3. 保存时透出每格颜色 这两个功能了. 拖动缩放功能也会尽快加上的.
另外, 从console看打印,有一个报错(不影响功能使用):

很奇怪的是, 一次进入后, 这个错会报4次, 按道理说,应该只报错一次才对.

这个版本, 在模拟器上测试绘图, 没有以前流畅. 把needStroke设置为false后绘制就恢复正常了.

[Mical]

有BUG ,绘制的过程中, 重新选择颜色时, 之前的绘制会丢失.
另外, 绘制的过程中, 如果缩放画布的时候, 之前的绘制也会丢失.
绘制的过程中, 如果进入拖动模式的话, 之前的绘制也会丢失.
加载以前的绘制, 缩放浏览没有问题.拖动没有问题.

[Lucy]

你好, 上面描述的bug没有复现, 麻烦提供下复现视频和代码给我们看下

[Mical]

下午跟踪多个设备拼接下的Graffiti UI效果的时候,突然想到既然Graffiti 提供了禁止涂抹的模式, 是不是本身也支持拖拽呢.为了验证我的猜想, 我屏蔽了之前给Graffiti 套上的ScrollView, 果然, 将画板放大后, 可以拖动. 当然,上述问题依然存在.
有个疑问. 调整scale的值会引起画布重绘(console 里面显示 有 render drawData), 这个可以理解. 但是为什么 penColor actionType isDragging 这些参数有更新的时候, 也会引起画布重绘呢?
还有一个疑问, 设置了width 和 height 后, Graffiti会在给定范围以内最大限度的平铺绘制.看下图,这是两个设备拼接后的效果:

每个格子不是正方形的! 实际上我是将pixelSizeX 和pixelSizeY 设置为同一个值的.
也就是说,实际上这两个参数没有生效.
我的建议是将计算出来的格子的宽高取最小值作为宽高使用(设置了宽高和纵横格子数后, pixelSizeX 和pixelSizeY 这两个参数外部就不用设置了).