繁体   English   中英

如何使此贝塞尔曲线与图像中的曲线相似

How to make this bezier curve resemble the one in the image

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我一直在一遍又一遍地尝试产生一条贝塞尔曲线,它类似于这条最终太阳移动的路径 I was guided to use SVG in producing the effect, and then add CSS to fill the hollowness of the shape after the shape has been drawn with javascript or in this case SVG.

有人可以帮助我最终如何在代码中制作形状,就像我尝试使用 SVG 一样,但无论如何,与图像相比,形状不会产生平滑度,并且会在贝塞尔线中留下一些凸起。

这是 SVG。 它正在开发中,但想法是贝塞尔曲线与图像上的曲线具有相同的平滑度,后来适用于 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>

问题暂未有回复.您可以查看右边的相关问题.
1 如何从图像中模拟贝塞尔曲线?

如果我有一组来自我扫描的黑白图像的点。 它看起来像一条曲线,我想使用这些点的三次贝塞尔曲线来模拟一条平滑的曲线。 我怎样才能找出起点,2个控制点和终点? 从图像中可以模拟出几条三次贝塞尔曲线,但我不知道如何找出控制点。 ...

2 如何使贝塞尔曲线中的线接点平滑?

我正在尝试使用UIBezierPath绘制长方体形状。 我的绘图代码如下: ((x,y)是我的UIView原点,(h,w)是它的大小) 我创建了3条路径,因为我希望每个路径都具有不同的alpha值。 我得到所需的输出如下: 但是令我惊讶的是, h (高度)的值很少,我得 ...

3 如何使Sprite遵循贝塞尔曲线

我是Objective-c和sprite kit的新手,但我已经做了一段时间的游戏开发。 我目前正在进行2D游戏,我的敌人船只在屏幕上从右向左移动。 我一直在关注我游戏的不同部分的教程,然后在必要时添加它。 我找到了一个教程,其中游戏中的敌人遵循bezier路径并且我已经设法在我的游戏中实 ...

4 提取图像中主体的贝塞尔曲线点

我正在尝试定义并实际编码(python 首选)用于提取/生成 Bézier 曲线点(结)的解决方案,它定义了图像中的单个主题轮廓。 例如 - 鉴于此图像:示例图像我想生成|计算定义这条可爱狗轮廓的贝塞尔曲线结。 任何想法都会有很大帮助。 谢谢! ...

6 在Java中绘制贝塞尔曲线

我需要创建一个简单的Java程序,通过任意数量的点逐个像素地绘制贝塞尔曲线。 此刻,一切似乎都没问题,只是曲线总是在x = 0 y = 0坐标处结束。 截图1 截图2 我需要它在最后一点结束。 我的大脑今天工作不太好,所以我正在寻求帮助。 这是我有的: ...

7 CSS中的贝塞尔曲线?

有没有办法在CSS中获得这种bezier效果 ? 正如您在小提琴中看到的那样,我正在使用画布通过以下代码向窗口控件句柄添加弯曲的底部: 但这看起来不是很好。 模糊,无法完全对齐。 如果我可以使用CSS,那么它看起来会很清晰。 ...

8 在加工中沿贝塞尔曲线移动

我the ball moving in a Bezier Curve from start to the middle of the curve代码是: 我已经定义了设置,绘制等中的所有内容,但是每当按下空间时,我只想从Bezier曲线的起点到中间发射球一次。 当前版本显示了循环。 ...

9 WPF中的贝塞尔曲线

我正在WPF中绘制一些Bezier曲线,并且在大多数情况下都可以使用,但是每个线段之间都有一些微弱的分隔。 如您所见,它们甚至出现在直线部分中,因此我不认为问题是由于细分数量不足所致。 (此图像的放大倍率为4倍。) 我正在使用System.Windows.Shapes.Line对象的 ...

10 可可中的高阶贝塞尔曲线

有什么方法可以以任意权力在可可中创建贝塞尔曲线? 例如,对于我的应用程序的一部分,我需要一个起伏的单元格。 因此,我想使用10到50个不同的点绘制一条曲线,形成一个循环。 这些点将随机波动。 我以为可以用这些点作为参考,或者根据这些点外推参考,来画一条贝塞尔曲线来表示循环。 我应该 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM