1

我有一个绘图板，我使用 quadraticCurveTo 来绘制所有的线条和曲线，我希望当你更快地移动鼠标时线条变得更细。然而，如果我只是做一些计算笔的速度并改变曲线的粗细，那么每条曲线都是不同的粗细，粗细不会平滑变化。还有另一种方法可以做到这一点吗？

换句话说 - quadraticCurveTo 可以仅以设定的厚度绘制曲线，而不改变整个曲线的厚度吗？

如果是的话，你能想出另一种方法来改变线条的粗细吗？

这是一个jsfiddle：

http://jsfiddle.net/y24su/

这是绘制曲线的代码的主要部分 -

if (isMouseDown){
                        ++i;
                        X[i] = e.pageX;
                        Y[i] = e.pageY;
                               var x1 = X[i-2];
                               var y1 = Y[i-2];
                               var x2 = X[i-1];
                               var y2 = Y[i-1];
                               var x3 = X[i];
                               var y3 = Y[i];
                               var mid1x = (x1 + x2)/2;
                               var mid1y = (y1 + y2)/2;
                               var mid2x = (x2 + x3)/2;
                               var mid2y = (y2 + y3)/2;

                                var distance = Math.pow((Math.pow(mid2x-x2,2) + Math.pow(mid2y-y2,2)),2) + Math.pow((Math.pow(x2-mid1x,2) + Math.pow(y2-mid1y,2)),2);
                                var velocity = distance/2;
                              if(i>1)
                              {
                                  if (velocity<1)
                                  { drawQuadraticThreePoints("black", 10,  mid1x, mid1y, x2, y2, mid2x, mid2y);
                                  }
                                  else
                                  { drawQuadraticThreePoints("black", 10/velocity,  mid1x, mid1y, x2, y2, mid2x, mid2y);
                                  }
                              }
                          } 


function drawQuadraticThreePoints (color, thickness, x1,y1,x2,y2,x3,y3) {
  context.strokeStyle = color;
  context.lineWidth   = thickness;

  context.beginPath();
  context.moveTo(x1,y1);
  context.quadraticCurveTo(x2,y2,x3,y3);
  context.stroke();
}
4

1 回答 1

2

您只能为每个 context.beginPath 获得 1 个 context.lineWidth 设置。

这意味着您的 context.quadraticCurveTo 只能有 1 个线宽。

要获得一条没有“粗”宽度变化的可变宽度线，您必须将二次曲线分成许多较小的线段。

使用许多线段，您可以逐渐更改每个线段之间的线宽。

以下函数沿二次曲线计算 xy 点。

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return( {x:x,y:y} );
}

这些是函数的输入：

  • startPt、controlPt、endPt 是对象：例如。{ x:10, y:20 }
  • T 是沿曲线从 0.00 到 1.00 的区间
  • T==0.00 在行首
  • T==1.00 在行尾

每个 beginPath 1 lineWidth 的规则仍然适用，但为每条曲线绘制多条线段会为您提供更多 beginPaths 来逐渐调整 lineWidth。

于 2014-03-03T03:57:24.390 回答