Question

我有两个矩形，其中一个旋转了90度，我怎么能在两者之间划一条线。

<svg width="200" height="100" viewBox="-100 -50 200 100">
<g transform="scale(1,-1)">
    <g class="group" transform="">
        <g class="g1">
            <rect x="5" y="5" width="5" height="5" fill="red" class="rectA" style="fill: red;"></rect>
        </g>
        <g class="g2" transform="rotate(-90)">
            <rect x="10" y="10" width="10" height="10" fill="red" class="rectB" style="fill: green;"></rect>
        </g>
    </g>
</g>

我觉得脚本是，

    var rectA = d3.select(".rectA");
var rectB = d3.select(".rectB");

var x1 = rectA.attr("x");
var y1 = rectA.attr("y");
var x2 = rectB.attr("x");
var y2 = rectB.attr("y");
d3.select(".group").append("line").attr({ x1: x1, y1: y1, x2: x2, y2: y2 })
 .style("stroke", "blue").attr("class", "distanceLine").style("stroke-width", 3);

但结果不对，我该怎么办？

感谢。

My JSFiddle

I want like this pic

Answer 1

如果希望线的末端与某些变换坐标匹配，则必须对其应用相同的变换。

    var x1 = rectA.attr("x");
    var y1 = rectA.attr("y");
    var x2 = rectB.attr("x");
    var y2 = rectB.attr("y");
    var  p2 = rotate(x2,y2, -90);
    d3.select(".group")
      .append("line")
      .attr({ 'x1': x1, 'y1': y1, 'x2': p2[0], 'y2': p2[1] })
      .style("stroke", "blue")
      .attr("class", "distanceLine")
      .style("stroke-width", 3);


function rotate(x, y, angle) {
   angle = angle * Math.PI / 180;  // convert to radians
   return [Math.cos(angle) * x - Math.sin(angle) * y,
           Math.cos(angle) * y + Math.sin(angle) * x];
}

Demo fiddle here

如何在旋转和非旋转矩形之间画一条线？

1 个答案: