本文介绍了如何在SVG / raphael的贝塞尔曲线末端绘制箭头?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一条曲线:
var path = ["M", x1.toFixed(3), y1.toFixed(3), "L", arrow_left_x, arrow_left_y, "L", arrow_right_x, arrow_right_y, "L", x1.toFixed(3), y1.toFixed(3), "C", x2, y2, x3, y3, x4.toFixed(3), y4.toFixed(3)].join(",");
但是我的箭头没有正确完成。
- 它只指向右边,并且没有' t指向与贝塞尔曲线末端曲线斜率相同的方向。
- 它没有填充
but my arrow is not correctly done.
- it only points to the right, and doesn't point the same direction as the slope of the curve at the end of the bezier.- it is not filled
现在,我知道我在这里没有正确地做数学,但主要是,我只想知道如何填写线末端的三角形。谢谢!
now, I know I'm not doing the math correctly here, but mainly, I just want to know how to fill the triangle at the end of the line. thanks!
出于演示目的:
arrow_left_x = (x1 - 8);
arrow_left_y = (y1 - 8);
arrow_right_x = (x1 - 8);
arrow_right_y = (y1 + 8);
这是获取我使用的坐标的代码。
that is the code for getting the the coordinates I use.
推荐答案
我想你应该使用标记作为你的目的。请参阅。
I guess you should use markers for your purpose. See an example here.
编辑:
您需要在 defs
部分创建一个标记:
You need to create a marker in the defs
section:
var defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
var marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
marker.setAttribute('id', 'Triangle');
marker.setAttribute('viewBox', '0 0 16 16');
marker.setAttribute('refX', '0');
marker.setAttribute('refY', '6');
marker.setAttribute('markerUnits', 'strokeWidth');
marker.setAttribute('markerWidth', '16');
marker.setAttribute('markerHeight', '12');
marker.setAttribute('orient', 'auto');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
marker.appendChild(path);
path.setAttribute('d', 'M 0 0 L 16 8 L 0 16 z');
path.setAttribute('stroke', '#000');
path.setAttribute('stroke-width', '1');
path.setAttribute('style', ' marker-start :none; marker-end :none; ');
document.getElementById( id_of_svg_placeholder ).getElementsByTagName('svg')[0].appendChild(defs);
defs.appendChild(marker);
并在CSS中引用它:
path {marker-start:url("#Triangle")}
或作为属性:
<path d="..." marker-start="url(#Triangle)" />
这篇关于如何在SVG / raphael的贝塞尔曲线末端绘制箭头?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!