使用插件在canvas上画的不规则图
现在知道这个不规则图形所有的点
现在改不了插件的的代码
如何后期给这个不规则图形内部填充颜色
有什么办法吗?
里面的arr1就是图中获取到点的格式
填充颜色不生效
arr1是已经知道的所有的点格式是[[x,y],[x,y].........]
使用插件在canvas上画的不规则图
现在知道这个不规则图形所有的点
现在改不了插件的的代码
如何后期给这个不规则图形内部填充颜色
有什么办法吗?
里面的arr1就是图中获取到点的格式
填充颜色不生效
arr1是已经知道的所有的点格式是[[x,y],[x,y].........]
如果知道所有点,可以对每个点修改单个像素
const imageData = ctx.createImageData(1, 1)
// imageData.data[0] = ...
// 默认是透明的
ctx.putImageData(imageData, x, y)
const points = [[1, 1],[14, 11],[31, 41]....]
ctx.beginPath();
ctx.moveTo(...points.pop());
for (const point of points){
ctx.lineTo(...point);
}
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill()
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
先简单回答一下,首先题主肯定是不知道被围起来的像素点是哪些的,问题的难点就在这里,思路大概是这样:
1.获取canvas中所有像素点组成的数组,这个有现成的API: ctx.getImageData
2.得到被围图像内部的一个点,这个应该比较好找,也许可以让用户用鼠标选,或者知道围合图像的颜色值,取其几何中心点(假设图像是凸的,实在不凸也有办法,这不是重点)
3.从这个点出发,用“种子填充”(seed filling)算法找出所有内部的像素点
4.改变数组中内部点的颜色,再写回canvas(ctx.putImageData)
我知道这有点像把大象放进冰箱里,最关键的一步说得太简略了,哈哈哈,不过按名字搜索,还是能找到算法很清晰的说明的。实现可以参考我一个老项目transparentize-image-web,是让用户通过鼠标点击,把图像上颜色相近的像素变透明的。
后面有时间的话,我再撸个直接解决问题的实现代码。