gpt4 book ai didi

javascript - 沿着曲线移动时,是否可以更改 "quadraticCurveTo"绘制的线的粗细?

转载 作者:行者123 更新时间:2023-11-30 17:35:33 25 4
gpt4 key购买 nike

我有一个绘图板,我使用 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();
}

最佳答案

对于每个 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。

关于javascript - 沿着曲线移动时,是否可以更改 "quadraticCurveTo"绘制的线的粗细?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22137763/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com