как из 1 класса передать координаты фигуры во 2 класс, после перетаскивания фигуры

Question

У меня есть 2 класса. в 1 классе создается прямоугольник и так же сделана функция перетаскивания в 2 классе рисуется линия

я пытался с помощью event отловить перемещение и потом передавать координаты, но не смог реализовать

как передавать координаты прямоугольников из класса фигур в класс линий и рисовать линию когда прямоугольник перемещается

вот код

var width = 1425,
    height = 1000;

var svg = d3.select("body").append("svg");

svg.attr("height", height)
    .attr("width", width);


var deltaX, deltaY;

class Rect {
    constructor(x_block, y_block) {
        this.x_block = x_block;
        this.y_block = y_block;
    }

    get_rect() {
        var name = svg.append("rect")
            .attr("href", "#pointer")
            .style("fill", "aliceblue")
            .style("stroke", "grey")
            .style("stroke-width", "2")
            .attr("x", this.x_block)
            .attr("y", this.y_block)
            .attr("width", 150)
            .attr("height", 200)
            .attr("rx", 3);


        var dragHandler = d3.drag()
            .on("start", function () {
                var current = d3.select(this);
                deltaX = current.attr("x") - d3.event.x;
                deltaY = current.attr("y") - d3.event.y;
            })

            .on("drag", function () {
                d3.select(this)
                    .attr("x", d3.event.x + deltaX)
                    .attr("y", d3.event.y + deltaY);


            });

        dragHandler(svg.selectAll("rect"));


    }


}

class Lines {
    constructor(rect1, rect2) {
        this.x1_block = rect1.x_block;
        this.y1_block = rect1.y_block;
        this.x2_block = rect2.x_block;
        this.y2_block = rect2.y_block;
    }


    ad_line() {

        var line1 = svg.append("svg").append('path').attr('d', `M ${this.x1_block + 150}, ${this.y1_block + 100} Q ${(this.x2_block) - (this.x1_block)},${(this.y2_block)} ${this.x2_block},${this.y2_block + 100}`).attr('fill', 'none').attr("stroke", "red")
    }
}

var rect3 = new Rect(400, 200)
var rect4 = new Rect(850, 450)
rect3.get_rect()
rect4.get_rect()



var line_x = new Lines(rect3, rect4)
line_x.ad_line()

svg line{
    stroke: grey;
    stroke-width: 2;

}

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="node_modules/d3/dist/d3.min.js"></script>
    <script src = "https://d3js.org/d3-drag.v1.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>

</head>
<body>
    <script src="scripts/script.js"></script>
    <div class="svg-container">
        <svg id="click" xmlns="http://www.w3.org/2000/svg" >
            <defs>
                <g id="pointer" transform="scale(0.8)">
                    <path d="M0-1c-14.5-25.6-14.5-25.7-14.5-33.8c0-8.1,6.5-14.6,14.5-14.6s14.5,6.6,14.5,14.6C14.5-26.7,14.5-26.6,0-1z"></path>
                    <path d="M0-49c7.7,0,14,6.3,14,14.1c0,8,0,8.1-14,32.8c-14-24.7-14-24.9-14-32.8C-14-42.7-7.7-49,0-49 M0-50c-8.3,0-15,6.8-15,15.1 S-15-26.5,0,0c15-26.5,15-26.5,15-34.9S8.3-50,0-50L0-50z"></path>
                </g>
            </defs>
        </svg>
    </div>
</body>
</html>

БЛОГ НА HUSL

как из 1 класса передать координаты фигуры во 2 класс, после перетаскивания фигуры

Ответы (0 шт):