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"?> <!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)"> <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> ------------------------------------ ----- To unsubscribe send a message to: [email protected] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ----Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> Your email settings: Individual Email | Traditional <*> To change settings online go to: http://groups.yahoo.com/group/svg-developers/join (Yahoo! ID required) <*> To change settings via email: [email protected] [email protected] <*> To unsubscribe from this group, send an email to: [email protected] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
