Loading ...
Sorry, an error occurred while loading the content.

Re: [svg-developers] Problem in Resize SVG Drag and Rotate......with code file

Expand Messages
  • Mr Rauf
    please help ......i m very thankful to you.... ________________________________ From: Mr Rauf To: svg-developers@yahoogroups.com
    Message 1 of 3 , Jan 27, 2011
    View Source
    • 0 Attachment
      please help ......i m very thankful to you....




      ________________________________
      From: Mr Rauf <cute_rauf_696@...>
      To: svg-developers@yahoogroups.com
      Sent: Fri, January 21, 2011 4:25:03 PM
      Subject: [svg-developers] Problem in Resize SVG <rect> Drag and
      Rotate......with code file


      HI All,
      i want to implement the functionalty of rectangle very similar like SVG-edit
      where user can rotate the rectangle and also resize it.But i have problem in
      resizing the rectangle ,when the Rectangle is move functionalty is reversed can
      any one help me to solve thiss....Plz help me to solve this problem.....
      <----------SVG------------->
      ?xml version="1.0" standalone="no"?>
      http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


      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)">

      <rect id="rectTemplate" x="0" y="0" stroke="blue" width="100" height="30"
      transform="translate(20,100)"/>

      </svg>
      <-----------HTML------------->
      <%--
      Document : grouping
      Created on : 07-Dec-2010, 12:05:35
      Author : AbdulRauf
      --%>

      <%@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="rect.svg" style="position:fixed;width:
      800px;height:800px;bottom:-100px;right: 375px;">

      </object>
      path: <input type="text" id="path" >
      <input type="button" value="Rotate" onclick="Rotate()">


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

      var svgDoc=null;
      var svgRoot=null;
      var ObjArray = new Array();
      var GroupArray = new Array();
      var SelectRect = null;
      var OrigX = 0;
      var OrigY = 0;
      var bInDrawRect = false;
      var bMoveObjects = false;
      var ZoomI =false;
      var ZoomOu = false;
      var zoomin=false;
      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 resizingLeft = false;
      var resizingRight = false;
      var resizingTop = false;
      var resizingBottom = false;
      var main=null
      var toolbar=null;
      var drawingArea=null;

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

      svgDoc=ob.contentDocument;
      svgRoot=svgDoc.documentElement;
      MyGroupObjectsObj = svgDoc.getElementById("SelectGroup");

      grabPoint = svgRoot.createSVGPoint();
      clientPoint = svgRoot.createSVGPoint();

      rectTemplate = svgDoc.getElementById('rectTemplate')


      }, false)
      var rotate=0
      function Rotate(){

      rotate+=10
      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=255;
      var newypo=255;

      rectTemplate.setAttribute("transform", "rotate("+rotate+" "+ 256+" "+256+")")

      }

      function MouseDown(evt)
      {

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

      if (targetElement == rectTemplate)
      {
      dragTarget = targetElement;
      checkForResizeAttempt = true;
      }

      var transMatrix = dragTarget.getCTM();
      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;
      }
      else if ((grabPoint.y - rectY) < 10)
      {
      resizingTop = true;
      }
      else if (((rectY + rectHeight)- grabPoint.y) < 10)
      {
      resizingBottom = true;
      }
      if (resizingLeft || resizingRight || resizingTop || resizingBottom)
      {
      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 if (resizingTop)
      {
      if (window.console) console.log(evt.clientX + " " + evt.clientY);
      deltaY = (clientPoint.y - evt.clientY);
      if (window.console) console.log("deltaY = " + deltaY);
      dragTarget.setAttributeNS(null,"height",rectHeight + deltaY);
      dragTarget.setAttributeNS(null,"y",rectY - deltaY);
      }
      else if (resizingBottom)
      {
      deltaY = (clientPoint.y - evt.clientY);
      dragTarget.setAttributeNS(null,"height",rectHeight - deltaY);
      }
      else
      {
      newX = evt.clientX-grabPoint.x;
      newY = evt.clientY-grabPoint.y;

      dragTarget.setAttributeNS(null,'transform','translate(' + newX + ',' + newY +
      ')');
      }

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

      dragTarget = null;

      }

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







      [Non-text portions of this message have been removed]
    Your message has been successfully submitted and would be delivered to recipients shortly.