1

我想画线条，但它们有锋利的边缘，例如，如果你用线条写一个词。在 Photoshop 中，您可以使用不那么锐利的画笔，或者您可以采用高分辨率并缩小。HTML5 画布线也有一个很好的技巧吗？

        canvas.addEventListener('mousemove', function(e) {
        this.style.cursor = 'pointer';
        if(this.down) {
             with(ctx) {
                beginPath();
                moveTo(this.X, this.Y);
                lineTo(e.pageX , e.pageY );
                strokeStyle = red;
                ctx.lineWidth=1;
                stroke();
             }
             this.X = e.pageX ;
             this.Y = e.pageY ;
        }
    }, 0);
4

1 回答 1

1

正如您所发现的，当您让用户使用 mousemove 绘制折线时，您最终会得到一个绘制非常锯齿状线的点列表。

你需要做的是：

  • 减少点数
  • 使生成的路径与用户预期的形状保持一致。

所以你想从“之前”到“之后”：

在此处输入图像描述

Ramer-Douglas-Peucker 多边形简化算法

您可以使用 Ramer-Douglas-Peucker (RDP) 多边形简化算法来做到这一点。它减少了折线的“锯齿状”，同时保持了预期路径的本质。

以下概述了 RDP 的工作原理及其能够实现的目标：http: //ianqvist.blogspot.com/2010/05/ramer-douglas-peucker-polygon.html

感谢 Matthew Taylor，这是 RDP 算法的 javascript 实现：https ://gist.github.com/rhyolight/2846020

在 Matthew 的暗示中，“epsilon”是一个数字，表示您希望与原始“锯齿状”保持多近。

于 2013-03-24T17:52:54.143 回答