创建可以通过从角落拖动来调整大小的 svg 元素

Question

我正在与一群人一起创建一个网站，允许用户绘制不同类型的图表。我目前正在开发工作分解树 (WBT) 图表，但在使用 svg 元素时遇到了问题。

我希望能够允许用户通过从角落拖动形状来调整 canvas 上元素的大小。

我在网上搜索了几个小时以寻找合适的解决方案，但似乎找不到任何东西。

有人能帮帮我吗？

谢谢

Answer 1

好的，这是我想出的代码，它不是最好的，但它会帮助您了解我们如何做 "Resize"

Jsfiddle 来了http://jsfiddle.net/sv66bxee/

我的html代码是：-

 <div style="border: 2px solid;width: 800px;">
        <svg id="mycanvas" width="800px" height="500px" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
        <rect id="myrect" fill="black" x="100" y="70" width="100" height="100" />

        <rect id="resize" fill="red" x="190" y="160" width="20" height="20" />
        </svg>
    </div>

还有一些Javascript：-

document.addEventListener('mousedown', mousedown, false);

        var mousedown_points;
        function mousedown(e) {

            var target = e.target;
            if (target.id === 'resize') {
                mousedown_points = {
                    x: e.clientX,
                    y: e.clientY
                }
                document.addEventListener('mouseup', mouseup, false);
                document.addEventListener('mousemove', mousemove, false);
            }
        }

        function mousemove(e) {
            var current_points = {
                x: e.clientX,
                y: e.clientY
            }

            var rect= document.getElementById('myrect');
            var w=parseFloat(rect.getAttribute('width'));
            var h=parseFloat(rect.getAttribute('height'));

            var dx=current_points.x-mousedown_points.x;
            var dy=current_points.y-mousedown_points.y;

            w+=dx;
            h+=dy;

            rect.setAttribute('width',w);
            rect.setAttribute('height',h);

            mousedown_points=current_points;

            updateResizeIcon(dx,dy);
        }

        function updateResizeIcon(dx,dy){
            var resize= document.getElementById('resize');
            var x=parseFloat(resize.getAttribute('x'));
            var y=parseFloat(resize.getAttribute('y'));

            x+=dx;
            y+=dy;

            resize.setAttribute('x',x);
            resize.setAttribute('y',y);
        }


        function mouseup(e) {
            document.removeEventListener('mouseup', mouseup, false);
            document.removeEventListener('mousemove', mousemove, false);
        }

创建可以通过从角落拖动来调整大小的 svg 元素

Creating svg elements which can be resized by dragging from the corner

javascript

svg