Question

所有

我的应用程序中有一个SVG矩形，可以通过拖动矩形两侧的结束栏（左右）来水平拉伸。矩形可以是

（1）调整大小（按上述方式拉伸），

（2）拖动，

（3）及转动。

一切都很好，但是，一个奇怪的经验是，当我将矩形旋转到接近90度时，＆amp;然后尝试调整矩形的大小，它从矩形的相对边框而不是原始边框开始拉伸。（这是图像）：

rendition of functionality

当我使用旋转功能时，似乎在左右之间感到困惑。

这是经过修改的HTML，JS＆amp; SVG：

    <%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
<!--        <script type="text/javascript" src="CPolyline.js">

        </script>-->
    </head>
    <body>
        <object id="oo" data="rect2.svg" style="position:fixed;width: 800px;height:800px;bottom:-100px;right: 375px;">

    </object>
        path: <input type="button" id="path" onclick="X()">
        path2: <input type="button" id="path2" onclick="Y()">
     <input type="button" value="Rotate" onclick="Rotate1()">


        <script type="text/javascript">
            var ob=document.getElementById("oo")

            var svgDoc=null;
            var svgRoot=null;
            var MyGroupObjectsObj = null;
            var svgNS = "http://www.w3.org/2000/svg";
            var dragTarget = null;
            var rectTemplate = null;
            var grabPoint = null;
            var clientPoint = null;
            var rectX = null;
            var rectY = null;
            var rectWidth = null;
            var rectHeight = null;
            var arr=new Array();
            var resizingLeft = false;
            var resizingRight = false;
            var rectrot=null

            ob.addEventListener("load", function(){

                svgDoc=ob.contentDocument;

                svgRoot=svgDoc.documentElement;
                grabPoint = svgRoot.createSVGPoint();
                clientPoint = svgRoot.createSVGPoint();
                rectTemplate = svgDoc.getElementById('rectTemplate')

       rectrot=svgDoc.getElementById("rect1")



}, false)



var angel=0


function Rotate1()
{

       angel=angel+10
       //alert(rectrot)

       var c=rectTemplate.getAttribute("transform");
       var widt=Number(rectTemplate.getAttribute("width"))/2;

        var hie=Number(rectTemplate.getAttribute("height"))/2
        var tran=c.match(/[\d\.]+/g);
        var newxpo=Number(tran[0])+widt;
        var newypo=Number(tran[1])+hie;
        var r=Math.tan((newxpo)/(newypo))
      rectTemplate.parentNode.setAttribute("transform","translate("+newxpo+" "+newypo+")"+"rotate("+angel+") translate("+(newxpo*-1)+" "+(newypo*-1)+")");



}


function MouseDown(evt)
{

  var targetElement = evt.target;
       var checkForResizeAttempt = false;

        if (targetElement == rectTemplate)
        {
            //arr.push(cir ,cir1,rectTemplate)

               dragTarget = targetElement;
               checkForResizeAttempt = true;

                       var transMatrix = dragTarget.getCTM();


        grabPoint.x = evt.clientX - Number(transMatrix.e);
        grabPoint.y = evt.clientY - Number(transMatrix.f);

        }

        var transMatrix = dragTarget.getCTM();



//var transMatrix = dragTarget.getCTM().inverse();

        grabPoint.x = evt.clientX - Number(transMatrix.e);
        grabPoint.y = evt.clientY - Number(transMatrix.f);

        if (window.console) console.log(grabPoint.x + " " + grabPoint.y);
        if (window.console) console.log(evt.clientX + " " + evt.clientY);

        if (checkForResizeAttempt)
        {
          clientPoint.x = evt.clientX;
          clientPoint.y = evt.clientY;
          rectX = Number(dragTarget.getAttributeNS(null, "x"));
          rectY = Number(dragTarget.getAttributeNS(null, "y"));
          rectWidth = Number(dragTarget.getAttributeNS(null, "width"));
          rectHeight = Number(dragTarget.getAttributeNS(null, "height"));

          if ((grabPoint.x - rectX) < 10)
          {
            resizingLeft = true;
          }
          else if (((rectX + rectWidth) - grabPoint.x) < 10)
          {
            resizingRight = true;
          }

          if (resizingLeft || resizingRight)
          {
            dragTarget.setAttributeNS(null,"stroke","green");
          }
          else
          {
            dragTarget.setAttributeNS(null,"stroke","black");
          }
        }
      }

function MouseMove(evt)
{
evt.stopPropagation();
 if (dragTarget == null)
      {
        return;
      }
      if (resizingLeft)
      {
        if (window.console) console.log(evt.clientX + " " + evt.clientY);
        deltaX = (clientPoint.x - evt.clientX);
        if (window.console) console.log("deltaX = " + deltaX);
        dragTarget.setAttributeNS(null,"width",rectWidth + deltaX);
        dragTarget.setAttributeNS(null,"x",rectX - deltaX);
      }
      else if (resizingRight)
      {
        deltaX = (clientPoint.x - evt.clientX);
        if (window.console) console.log("rectWidth = " + rectWidth + " deltaX = " + deltaX);
        dragTarget.setAttributeNS(null,"width",rectWidth - deltaX);


      }
      else
      {


        var newXX = evt.clientX-grabPoint.x;
        var newYX = evt.clientY-grabPoint.y;


        dragTarget.setAttributeNS(null,'transform','translate(' + newXX + ',' + newYX + ')');
      }

}
function MouseUp(evt)
{
  evt.stopPropagation();
   if (dragTarget == null)
      {
        return;
      }
      resizingLeft = false;
      resizingRight = false;
      resizingTop = false;
      resizingBottom = false;
     // var transMatrix = dragTarget.getCTM().inverse();
      dragTarget.setAttributeNS(null,"stroke","blue");
      dragTarget = null;


}


        </script>
    </body>
</html>



--



=======SVG ====

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="612px" height="792px" xml:space="preserve"
onmousedown="ecmascript:top.MouseDown(evt)"
onmousemove="ecmascript:top.MouseMove(evt)"
onmouseup="ecmascript:top.MouseUp(evt)">




<g id="rect1">
  <rect id="rectTemplate" x="0" y="0" stroke="blue" width="100" height="30" />

 </g>

Answer 1

我在这里的答案中发布了一个拖动和调整转换SVG rects大小的示例：
SVG coordinates with transform matrix

您可以在此处查看我网站上的工作示例：
http://phrogz.net/svg/drag_under_transformation.xhtml

关键是：

开始拖动时（mousedown）记录鼠标位置（在SVG全局空间中）。
在拖动期间（mousemove）计算拖动的偏移量（在SVG全局空间中），然后
将该偏移量从全局空间转换为对象的本地空间，并使用它来通知您的更改。

无论应用何种转换层次结构，都可以正常工作（如我的示例所示）。

Answer 2

您是否尝试更改代码以围绕形状中心旋转形状？

关于转型的W3C草案

Here is an excerpt：

rotate(<rotate-angle> [<cx> <cy>]),
which specifies a rotation by <rotate-angle> degrees about a given point.

If optional parameters <cx> and <cy> are not supplied, the rotate is about the origin of the current user coordinate system. 

The operation corresponds to the matrix [cos(a) sin(a) -sin(a) cos(a) 0 0].

If optional parameters <cx> and <cy> are supplied, the rotate is about the point (cx, cy). 

The operation represents the equivalent of the following specification: 
translate(<cx>, <cy>) rotate(<rotate-angle>) translate(-<cx>, -<cy>).

如果您将cx和cy设置为功能区的中心，这可能有助于我从您的代码中获取的上下文。

SVG - 调整以角度定位的矩形的大小

2 个答案: