Question

我正在创建一个由人员组成的网站，允许用户绘制不同类型的图表。我正在开发工作分解树（WBT）图表，并且遇到了svg元素的问题。

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

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

请问有人对我有什么帮助吗？

由于

Answer 1

好的，这是我提出的代码，它不是最好的，但它将帮助你理解我们如何做＆＃34;调整大小＆＃34;

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元素，可以通过从角落拖动来调整大小

1 个答案: