如何解决SVG将行转换为矩形
如何通过专门保留有关线的起点和终点的信息将线转换为矩形。例如。通过旋转或倾斜矩形,我会得到一个与线具有相同长度和相同方向的矩形。
解决方法
lineToPath 使用线条的起点和终点以及笔画宽度将 SVG <line>
转换为闭合的 <path>
:
const lineToPath = ({x1,y1,x2,y2,width}) => {
const angle = Math.atan((y2 - y1) / (x2 - x1));
const dx = width / 2 * -Math.sin(angle);
const dy = width / 2 * Math.cos(angle);
return `M ${x1 + dx},${y1 + dy} L ${x2 + dx},${y2 + dy}
L ${x2 - dx},${y2 - dy} L ${x1 - dx},${y1 - dy} Z`;
}
const line = d3.select('line');
const x1 = parseFloat(line.attr('x1'));
const x2 = parseFloat(line.attr('x2'));
const y1 = parseFloat(line.attr('y1'));
const y2 = parseFloat(line.attr('y2'));
const width = parseFloat(line.attr('stroke-width'));
const linePath = lineToPath({x1,width});
d3.select('path').attr('d',linePath);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
<line x1="10" y1="90" x2="220" y2="30" stroke="yellow" stroke-width="30" />
<path stroke="red" fill="none" />
</svg>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。