Fatal编程技术网
  • javascript/
  • Javascript 鼠标移动时调整路径元素的大小

Javascript 鼠标移动时调整路径元素的大小

javascript svg path

Javascript 鼠标移动时调整路径元素的大小,javascript,svg,path,resize,Javascript,Svg,Path,Resize,在这里，我使用path元素在鼠标移动时调整它的大小，但是当我设置“d”属性时 var attr="M"+(moveX+5)+","+(moveY+5)+" L"+(moveX+widthC1-5)+","+ (moveY+5)+" "+(moveX+widthC1-5)+","+(moveY+heightC1-5)+" "+(moveX+5)+","+(moveY+heightC1-5)+" Z"; getPath.setAttribute

在这里，我使用path元素在鼠标移动时调整它的大小，但是当我设置“d”属性时

var attr="M"+(moveX+5)+","+(moveY+5)+" L"+(moveX+widthC1-5)+","+
                            (moveY+5)+" "+(moveX+widthC1-5)+","+(moveY+heightC1-5)+" "+(moveX+5)+","+(moveY+heightC1-5)+" Z";
getPath.setAttributeNS("d",attr);
然后“d”属性将自身更改为

m115 122l300 122 300 115 300 z

但当我打印attr的值时，它会打印正确的值

M103108 L300108 300300 103300 Z

那么，为什么“d”属性的值会自动变为小写

请不要使用jquery给出答案。

我已经得到了我想要的结果， HTML代码是

<html>
<head>
    <script type="text/javascript" src="resizepath.js">
    </script>
</head>
<body>
    <div width="100%" height="100%">
        <svg id="Svg" height="900" width="900" onload="main()">
            <path id="rectPath" fill="#05bf05"   d="M100,100L300,100 300,300 100,300 Z" style="cursor:move;"></path>                
             <line id="l1" x1="95" y1="95" x2="305" y2="95" stroke="#808080" stroke-width="1" stroke-dasharray="5,5" style="cursor:n-resize"/>
            <line id="l2" x1="305" y1="95" x2="305" y2="305" stroke="#808080" stroke-width="1" stroke-dasharray="5,5" style="cursor:e-resize"/>
            <line id="l3" x1="305" y1="305" x2="95" y2="305" stroke="#808080" stroke-width="1" stroke-dasharray="5,5" style="cursor:s-resize"/>
            <line id="l4" x1="95" y1="305" x2="95" y2="95" stroke="#808080" stroke-width="1" stroke-dasharray="5,5" style="cursor:w-resize" />
            <circle id="c1" cx="95" cy="95" r="5" stroke="black" stroke-width="0" fill="black" opacity="0.8" style="cursor:nw-resize" />
            <circle id="c2" cx="305" cy="95" r="5" stroke="black" stroke-width="0" fill="black" opacity="0.8" style="cursor:ne-resize" />
            <circle id="c3" cx="305" cy="305" r="5" stroke="black" stroke-width="0" fill="black" opacity="0.8" style="cursor:se-resize" />
            <circle id="c4" cx="95" cy="305" r="5" stroke="black" stroke-width="0" fill="black" opacity="0.8" style="cursor:sw-resize" />
        </svg>
    </div>

</body>
}

尝试
getPath.setAttribute（“d”，attr）
而不是
setAttributeNS
。对于
setAttributeNS
，第一个参数应该是名称空间（可以使用null：我使用过setAttribute，但结果相同）。@defghi1977 
var getSvg=document.getElementById("Svg");
var getPath=document.getElementById("rectPath");
var getC1=document.getElementById("c1");
var getC2=document.getElementById("c2");
var getC3=document.getElementById("c3");
var getC4=document.getElementById("c4");
var getL1=document.getElementById("l1");
var getL2=document.getElementById("l2");
var getL3=document.getElementById("l3");
var getL4=document.getElementById("l4");
var eventFireC1=false;
var eventFireC2=false;
var eventFireC3=false;
var eventFireC4=false;  
var eventFireRect=false;

getC1.onmousedown=function(event)
{
    var downX=event.clientX-7;
    var downY=event.clientY-7;
    getC1.setAttribute('cx',downX);
    getC1.setAttribute('cy',downY);
    eventFireC1=true;
}

getC1.onmousemove=function(event)
{
    if(eventFireC1)
    {
        var moveX=event.clientX-7;
        var moveY=event.clientY-7 ;
        getC1.setAttribute('cx',moveX);
        getC1.setAttribute('cy',moveY);
        getC2.setAttribute('cy',moveY);
        getC4.setAttribute('cx',moveX);
        getL1.setAttribute('x1',moveX);
        getL1.setAttribute('y1',moveY);
        getL1.setAttribute('y2',moveY);
        getL2.setAttribute('y1',moveY);
        getL3.setAttribute('x2',moveX);
        getL4.setAttribute('x1',moveX);
        getL4.setAttribute('x2',moveX);
        getL4.setAttribute('y2',moveY);
        var attr="M"+(moveX+5)+","+(moveY+5)+" L"+(getL1.getAttribute('x2')-5)+","+(moveY+5)+" "+(getL2.getAttribute('x2')-5)+","+(getL2.getAttribute('y2')-5)+" "+(moveX+5)+","+(getL4.getAttribute('y1')-5)+" Z";
        getPath.setAttribute("d",attr);
        console.log(getPath);
    }
}

document.body.onmouseup = function() {
    eventFireC1 = false;
}

getC1.onmouseup=function(event)
{
    var upX=event.clientX;
    var upY=event.clientY;

    eventFireC1=false;
}

getC2.onmousedown=function(event)
{
    var downX=event.clientX-7;
    var downY=event.clientY-7;
    getC2.setAttribute('cx',downX);
    getC2.setAttribute('cy',downY);
    eventFireC2=true;
}

getC2.onmousemove=function(event)
{
    if(eventFireC2)
    {
        var moveX=event.clientX-7;
        var moveY=event.clientY-7;
        getC2.setAttribute('cx',moveX);
        getC2.setAttribute('cy',moveY);
        getC1.setAttribute('cy',moveY);
        getC3.setAttribute('cx',moveX);
        getL1.setAttribute('x2',moveX);
        getL1.setAttribute('y2',moveY);
        getL1.setAttribute('y1',moveY);
        getL2.setAttribute('y1',moveY);
        getL2.setAttribute('x1',moveX);
        getL2.setAttribute('x2',moveX);
        getL3.setAttribute('x1',moveX);
        getL4.setAttribute('y2',moveY);
        var a=getL1.getAttribute('x1');
        console.log(a);
        var widthC2=moveX-getL3.getAttribute('x2');
        var heightC2=getL3.getAttribute('y2')-moveY;
        var attr="M"+(parseInt(getL1.getAttribute('x1'))+5)+","+(moveY+5)+" L"+(moveX-5)+","+(moveY+5)+" "+(moveX-5)+","+(getL2.getAttribute('y2')-5)+" "+(parseInt(getL3.getAttribute('x2'))+5)+","+(getL3.getAttribute('y2')-5)+" Z";
        getPath.setAttribute("d",attr);
        console.log(getL1.getAttribute('x1'));
        console.log(attr);
        console.log(getPath);
    }
}

getC2.onmouseup=function(event)
{
    var upX=event.clientX;
    var upY=event.clientY;
    eventFireC2=false;
}

getC3.onmousedown=function(event)
{
    var downX=event.clientX-7;
    var downY=event.clientY-7;
    getC3.setAttribute('cx',downX);
    getC3.setAttribute('cy',downY);
    eventFireC3=true;
}
getC3.onmousemove=function(event)
{
    if(eventFireC3)
    {
        var moveX=event.clientX-7;
        var moveY=event.clientY-7;
        getC3.setAttribute('cx',moveX);
        getC3.setAttribute('cy',moveY);
        getC2.setAttribute('cx',moveX);
        getC4.setAttribute('cy',moveY);
        getL1.setAttribute('x2',moveX);
        getL2.setAttribute('x1',moveX);
        getL2.setAttribute('x2',moveX);
        getL2.setAttribute('y2',moveY);
        getL3.setAttribute('x1',moveX);
        getL3.setAttribute('y1',moveY);
        getL3.setAttribute('y2',moveY);
        getL4.setAttribute('y1',moveY);
        var widthC3=moveX-getL1.getAttribute('x1');
        var heightC3=moveY-getL1.getAttribute('y1');
        var attr="M"+(parseInt(getL1.getAttribute('x1'))+5)+","+(parseInt(getL1.getAttribute('y1'))+5)+" L"+(moveX-5)+","+(parseInt(getL1.getAttribute('y2'))+5)+" "+(moveX-5)+","+(moveY-5)+" "+(parseInt(getL4.getAttribute('x1'))+5)+","+(moveY-5)+" Z";
        getPath.setAttribute("d",attr);
    }
}

getC3.onmouseup=function(event)
{
    var upX=event.clientX;
    var upY=event.clientY;
    eventFireC3=false;
}

getC4.onmousedown=function(event)
{
    var downX=event.clientX-7;
    var downY=event.clientY-7;
    getC4.setAttribute('cx',downX);
    getC4.setAttribute('cy',downY);
    eventFireC4=true;
}

getC4.onmousemove=function(event)
{
    if(eventFireC4)
    {
        var moveX=event.clientX-7;
        var moveY=event.clientY-7;
        getC4.setAttribute('cx',moveX);
        getC4.setAttribute('cy',moveY);
        getC1.setAttribute('cx',moveX);
        getC3.setAttribute('cy',moveY);
        getL1.setAttribute('x1',moveX);
        getL2.setAttribute('y2',moveY);
        getL3.setAttribute('y1',moveY);
        getL3.setAttribute('y2',moveY);
        getL3.setAttribute('x2',moveX);
        getL4.setAttribute('x1',moveX);
        getL4.setAttribute('y1',moveY);
        getL4.setAttribute('x2',moveX);
        var widthC4=getL2.getAttribute('x2')-moveX;
        var heightC4=moveY-getL2.getAttribute('y1');
        var attr="M"+(moveX+5)+","+(parseInt(getL1.getAttribute('y1'))+5)+" L"+(getL1.getAttribute('x2')-5)+","+(parseInt(getL1.getAttribute('y2'))+5)+" "+(getL2.getAttribute('x2')-5)+","+(moveY-5)+" "+(moveX+5)+","+(moveY-5)+" Z";
        getPath.setAttribute("d",attr);
        console.log(attr);
        console.log(getPath);
    }
}

getC4.onmouseup=function(event)
{
    var upX=event.clientX;
    var upY=event.clientY;
    eventFireC4=false;
}

getSvg.onmousemove=function()
{
    if(eventFireC1)
    {
        var moveX=event.clientX-7;
        var moveY=event.clientY-7 ;
        getC1.setAttribute('cx',moveX);
        getC1.setAttribute('cy',moveY);
        getC2.setAttribute('cy',moveY);
        getC4.setAttribute('cx',moveX);
        getL1.setAttribute('x1',moveX);
        getL1.setAttribute('y1',moveY);
        getL1.setAttribute('y2',moveY);
        getL2.setAttribute('y1',moveY);
        getL3.setAttribute('x2',moveX);
        getL4.setAttribute('x1',moveX);
        getL4.setAttribute('x2',moveX);
        getL4.setAttribute('y2',moveY);
        var widthC1=getL2.getAttribute('x1')-moveX;
        var heightC1=getL2.getAttribute('y2')-moveY;
        var attr="M"+(moveX+5)+" "+(moveY+5)+"L"+(moveX+widthC1-5)+" "+(moveY+5)+" "+(moveX+widthC1-5)+" "+(moveY+heightC1-5)+" "+(moveX+5)+" "+(moveY+heightC1-5)+" Z";
        getPath.setAttribute('d',attr);
    }
    else if(eventFireC2)
    {
        var moveX=event.clientX-7;
        var moveY=event.clientY-7;
        getC2.setAttribute('cx',moveX);
        getC2.setAttribute('cy',moveY);
        getC1.setAttribute('cy',moveY);
        getC3.setAttribute('cx',moveX);
        getL1.setAttribute('x2',moveX);
        getL1.setAttribute('y2',moveY);
        getL1.setAttribute('y1',moveY);
        getL2.setAttribute('y1',moveY);
        getL2.setAttribute('x1',moveX);
        getL2.setAttribute('x2',moveX);
        getL3.setAttribute('x1',moveX);
        getL4.setAttribute('y2',moveY);
        var widthC2=moveX-getL3.getAttribute('x2');
        var heightC2=getL3.getAttribute('y2')-moveY;
        var attr="M"+(parseInt(getL1.getAttribute('x1'))+5)+","+(moveY+5)+" L"+(moveX-5)+","+(moveY+5)+" "+(moveX-5)+","+(getL2.getAttribute('y2')-5)+" "+(parseInt(getL3.getAttribute('x2'))+5)+","+(getL3.getAttribute('y2')-5)+" Z";
        getPath.setAttribute("d",attr);
    }
    else if(eventFireC3)
    {
        var moveX=event.clientX-7;
        var moveY=event.clientY-7;
        getC3.setAttribute('cx',moveX);
        getC3.setAttribute('cy',moveY);
        getC2.setAttribute('cx',moveX);
        getC4.setAttribute('cy',moveY);
        getL1.setAttribute('x2',moveX);
        getL2.setAttribute('x1',moveX);
        getL2.setAttribute('x2',moveX);
        getL2.setAttribute('y2',moveY);
        getL3.setAttribute('x1',moveX);
        getL3.setAttribute('y1',moveY);
        getL3.setAttribute('y2',moveY);
        getL4.setAttribute('y1',moveY);
        var widthC3=moveX-getL1.getAttribute('x1');
        var heightC3=moveY-getL1.getAttribute('y1');
        var attr="M"+(parseInt(getL1.getAttribute('x1'))+5)+","+(parseInt(getL1.getAttribute('y1'))+5)+" L"+(moveX-5)+","+(parseInt(getL1.getAttribute('y2'))+5)+" "+(moveX-5)+","+(moveY-5)+" "+(parseInt(getL4.getAttribute('x1'))+5)+","+(moveY-5)+" Z";
        getPath.setAttribute("d",attr);
    }
    else if(eventFireC4)
    {
        var moveX=event.clientX-7;
        var moveY=event.clientY-7;
        getC4.setAttribute('cx',moveX);
        getC4.setAttribute('cy',moveY);
        getC1.setAttribute('cx',moveX);
        getC3.setAttribute('cy',moveY);
        getL1.setAttribute('x1',moveX);
        getL2.setAttribute('y2',moveY);
        getL3.setAttribute('y1',moveY);
        getL3.setAttribute('y2',moveY);
        getL3.setAttribute('x2',moveX);
        getL4.setAttribute('x1',moveX);
        getL4.setAttribute('y1',moveY);
        getL4.setAttribute('x2',moveX);
        var widthC4=getL2.getAttribute('x2')-moveX;
        var heightC4=moveY-getL2.getAttribute('y1');
        var attr="M"+(moveX+5)+","+(parseInt(getL1.getAttribute('y1'))+5)+" L"+(getL1.getAttribute('x2')-5)+","+(parseInt(getL1.getAttribute('y2'))+5)+" "+(getL2.getAttribute('x2')-5)+","+(moveY-5)+" "+(moveX+5)+","+(moveY-5)+" Z";
        getPath.setAttribute("d",attr);
    }
    else
    {

    }
}