我一直在反复尝试产生一条贝塞尔曲线, 曲线类似于最终在太阳移动的路径 我被指导使用SVG来产生效果,然后在用javascript或本例中的SVG绘制形状后,添加CSS来填充形状的空心度。

有人可以协助我最终如何在代码中制作形状,就像我在SVG上尝试过的那样,但是无论如何,与图像相比,形状不会产生平滑度,并且在bezier线中会留下一些凸起。

这是SVG。 它在开发中,但是其想法是贝塞尔曲线具有与图像上的曲线相同的平滑度,并且以后可应用于CSS效果,可以在需要时在任意时刻停止和启动CSS效果。 CSS甚至可以执行这种操作吗? 意思是用图像中描绘的方式填充SVG形状。

 // The smoothing ratio const smoothing = 0.2 const points = [ [15, 35], [40, 30], [65, 10], [95, 5], [115, 20], [125, 25], ] //there should be more attributes here eventually. const line = (pointA, pointB) => { const lengthX = pointB[0] - pointA[0] const lengthY = pointB[1] - pointA[1] return { length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)), angle: Math.atan2(lengthY, lengthX) } } const controlPoint = (current, previous, next, reverse) => { const p = previous || current const n = next || current const o = line(p, n) const angle = o.angle + (reverse ? Math.PI : 0) const length = o.length * smoothing const x = current[0] + Math.cos(angle) * length const y = current[1] + Math.sin(angle) * length return [x, y] } const bezierCommand = (point, i, a) => { const cps = controlPoint(a[i - 1], a[i - 2], point) const cpe = controlPoint(point, a[i - 1], a[i + 1], true) return `C ${cps[0]},${cps[1]} ${cpe[0]},${cpe[1]} ${point[0]},${point[1]}` } const svgPath = (points, command) => { const d = points.reduce((acc, point, i, a) => i === 0 ? `M ${point[0]},${point[1]}` : `${acc} ${command(point, i, a)}` , '') return `<path d="${d}" fill="none" stroke="black" />` } const svg = document.querySelector('.svg') svg.innerHTML = svgPath(points, bezierCommand) 
 <svg viewBox="0 0 200 50" class="svg"> </svg> 

  ask by dev m translate from so

本文未有回复,本站智能推荐:

1回复

是否可以使HTML / CSS折线成为贝塞尔曲线的一部分?

所以这是我的代码: 它绘制以下折线: 但是,我要实现的目的(以便随后对折线进行动画处理)是一条带有嵌入贝塞尔曲线的折线: 这有可能吗? 如果是这样,我该如何创建类似这样的贝塞尔曲线的嵌入方法?
2回复

绘制SVG贝塞尔曲线

我有一组控制点代表一个高阶贝塞尔曲线。 如何使用单个SVG路径绘制此曲线? UPD: 例如,我有一组点:(x1,y1)(x2,y2)(x3,y3)(x4,y4)(x5,y5)。 SVG-path如何在C , S , Q或T方面看起来像? UPD 2:解决方案 我
1回复

应用三次贝塞尔曲线功能为属性更改设置动画

我正在Javascript中尝试使用三次贝塞尔曲线计时功能对各种元素进行动画处理。 (我知道通常最好使用CSS3或Javascript动画库来完成。我只是在这里使用Javascript来了解bezier函数的工作原理,并向他们自我介绍。) 因此,我得到了基本概念,并使用了由Steph
1回复

SVG动画标记中有​​多个立方贝塞尔曲线?

我只是在这里看一个简单的SVG蛋糕动画,CSS代码如下所示: 在检查了一下代码之后,我才知道层动画是由以下动画标签引起的: 现在,如果看到指定的三次方贝塞尔曲线,则会看到以下内容: 为什么会有3个三次方贝塞尔曲线? 动画中实际上使用了哪一个?
2回复

如何计算贝塞尔曲线上的控制点?

我确实有一个贝塞尔曲线,在某个点上,我想要第二个贝塞尔曲线以平滑的方式“分支”第一条曲线。 与计算相交点(遵循Bezier曲线的百分比)一起,我还需要控制点(切线和权重)。 相交点是使用以下javascript计算的: (非IE浏览器可以在http: //www.iscriptdes
1回复

了解inkscape贝塞尔曲线展平算法

您好,我正在将svg转换为hpgl格式。 我使用的绘图仪仅了解不了解贝塞尔曲线的hpgl的第一个版本。 因此,我正在尝试将可将曲线变平的线段从python转换为javascript的inkscape函数。 我正在阅读4个文件,我在所有数学知识中都有些迷失。 在hpgle_encode.p
1回复

SVG如何创建180度的贝塞尔曲线?

在SVG中:1。是否可以创建精确180度的贝塞尔曲线? 2. bezier曲线命令C和Q可以执行Arc命令吗? 3.是否可以仅使用以下命令创建一半的圆:M,m,C,c,Q,q? 到目前为止,我的实验表明,C命令可以创建弧,但不会像A命令创建的那样创建弧。
4回复

SVG:将圆弧转换为三次贝塞尔曲线

我正在尝试做一些我认为非常简单的事情:用三次贝塞尔曲线替换 SVG 路径中的所有弧。 这个:http ://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes并没有真正帮助我,因为它并没有真正说明转换。 我知道如何制作简单的弧,但 S