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

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

` `// 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 如何使贝塞尔曲线中的线接点平滑？

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

2015-02-05 10:49:40 1 2182   2d-games
4 提取图像中主体的贝塞尔曲线点

2020-06-18 19:28:42 0 40   bezier
6 在Java中绘制贝塞尔曲线

7 CSS中的贝塞尔曲线？

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

9 WPF中的贝塞尔曲线

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

© 2020-2022 STACKOOM.COM