1

次のような素敵で滑らかなテーパー ブラシを作成する必要があります。ここに画像の説明を入力

しかし、マウスの速度の動きに問題があります。ブラシのテーパーをマウスの移動速度に依存しないようにする方法。ブラシの先細りを作る必要がありますが、マウスの動きは非常に速くて遅くなります。

速度が異なると、次の結果が得られます。 ここに画像の説明を入力

    var el = document.getElementById('c');
    var ctx = el.getContext('2d');
    var isDrawing, lastPoint;
    ctx.lineWidth = 20; 

    el.onmousedown = function(e) {
        isDrawing = true;
        lastPoint = { x: e.clientX, y: e.clientY };
        ctx.lineWidth = 20;
    };

    el.onmousemove = function(e) {
    if (!isDrawing) return;

        ctx.lineJoin = "round";
        ctx.lineCap = "butt";
        ctx.strokeStyle = "#000000"; 
        ctx.globalAlpha = "1"; 
        
        ctx.globalCompositeOperation = "source-over"; 
        if(ctx.lineWidth >= 5) {   
            ctx.lineWidth -= 0.1;
        }

        var currentPoint = { x: e.clientX, y: e.clientY };

        ctx.beginPath();
        ctx.moveTo(lastPoint.x, lastPoint.y);
        ctx.lineTo(currentPoint.x, currentPoint.y);
        ctx.closePath();
        ctx.stroke();

        lastPoint = currentPoint;
    };

    el.onmouseup = function() {
        isDrawing = false;
    };

    function clearit() {
        ctx.clearRect(0,0, 1000, 1000);
    }
    canvas { border: 1px solid #ccc }
<canvas id="c" width="500" height="500"></canvas>

4

1 に答える 1

3

を使用して先細りのストロークを描く代わりにmousemove、 を使用mousedownして新しいストロークを開始し、 を使用mouseupしてその新しいストロークを終了します。配列を使用して、マウスダウンとマウスアップの間のすべてのマウス位置を収集します。

マウスダウンからマウスが移動した距離をmouseup計算し、その距離にわたって先細りのポリラインを描画できます。線形補間を使用して、開始から終了までの lineWidth の滑らかな遷移を計算できます。

mousemoves ではなく補間を使用しているため、マウスの速度は方程式から除外されます!

ユーザーが線を定義しているときにフィードバックを提供するために、 中に 1 ピクセルのストロークを描くことができますmousemove。このフィードバック ポリラインは、マウスを離すとテーパー ポリラインによって上書きされます。

于 2015-01-28T17:12:08.540 に答える