请教 Graphics 组件画线毛刺的问题

Creator 2.x
#1

  • Creator 版本：2.12

  • 目标平台： Web （Mac，Chrome76）

  • 之前哪个版本是正常的 ：2.02

  • 出现概率：100%

2.12 版本 如下图所示：

代码如下：

image.png1192×216 23.1 KB

配置如下：

image.png1036×562 34.3 KB

Demo如下:
graphisDemo.zip (735.2 KB)

1赞
#2

我本次测试看看。

#3

感谢，需要 Demo 吗？

#4

需要，你给我demo吧

#5

更新的主题下面了，辛苦 :blush:

毛刺问题只是出现在转角线上；
另外还会有概率出现扇形图形，貌似 lineTo 的时候点没有移动。

#6

更新下解决方案吧。

毛刺这个问题在 Mac 上面特别明显，在 Windows 和 手机、模拟器上不明显，开始就怀疑是点过于过于密集导致，于是朝着这个思路顺利解决了问题。

主要思路是过滤点，将在同一个像素内容的小数位点全过滤，比如 touchmove 的时候拿到的点 {x: 100.001, y: 100.001} 和下一个点 {x: 100.002, y: 100.002} 应该过滤掉后面的新点，我尝试发现在 5 个像素内的点都可以过滤为一个，视觉上不会有任何问题。

以下是核心代码：

start() {
    // 定义一个 points 数组来储存过滤后的点
    this.points = new Array();
    this.ctx = this.node.getComponent(cc.Graphics);
}

touchmove(e) {
    // 坐标转换
    const movePos = this.node.convertToNodeSpaceAR(e.getLocation());
    // 新的坐标和我们已经存储过的最后一个坐标做对比，如果相距都小于 5 个像素则略过
    if(
        Math.abs(parseInt(movePos.x) - this.points[this.points.length - 1].X) < 5
        && 
        Math.abs(parseInt(movePos.y) - this.points[this.points.length - 1].Y) < 5
    ) {
        console.log('skip point');
        return;
    }

    this.points.push(new Point(parseInt(movePos.x), parseInt(movePos.y)));
    this.ctx.lineTo(movePos.x, movePos.y);
    this.ctx.stroke();
}

代这样子就完美了！

2赞
#7

为什么我觉得这个毛刺很好看呢

#8

肯定要过滤啊.限定前后两点间的最小距离为1或者更大, 这样就是一个简单的平滑过程了.
甚至可以记录下所有生成的点, 等画完线以后,用代码对点进行过滤, 把相邻两段直线夹角小于某值的点合并成一个点. 这样就可以重复进行平滑过滤. 最后再用过滤后的点重新快速画一遍. 生成的线绝对漂亮