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 というルールは引き続き適用されますが、曲線ごとに複数の線分を描画すると、lineWidth を徐々に調整するためのより多くの beginPath が得られます。

于 2014-03-03T03:57:24.390 に答える