Jump to content

Interactive SVG question


delta9857

Recommended Posts

Hello everyone, I am trying to make an interactive SVG image that allows the user to click and drag the control points of quadratic bezier curves of a letter to distort its overall shape. So far I have managed to create small dots that mark the positions of the control points that can be dragged anywhere by using javascript. Now I just need to know if it is possible to set the x and y coordinates of the bezier curves to that of their corresponding dots so that if the user moves a dot, the bezier curve is distorted. I hope this makes atleast a little sense; if not, please tell me and I'll try to explain it a bit more clearly.I have also attached the SVG code for you to look at below: Note that the last group, titled "point markers", contains the drag-able 'dots' that represent the various control points of the curves.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><style>  .draggable {   cursor: move;  }</style><script type="text/ecmascript"> <![CDATA[  var selectedElement = 0;  var currentX = 0;  var currentY = 0;  var currentMatrix = 0;  function selectElement(evt) {   selectedElement = evt.target;   currentX = evt.clientX;   currentY = evt.clientY;   currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7,-1).split(' ');    for(var i=0; i<currentMatrix.length; i++) {   currentMatrix[i] = parseFloat(currentMatrix[i]);  }  selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");  selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");  selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");  }  function moveElement(evt){   dx = evt.clientX - currentX;   dy = evt.clientY - currentY;   currentMatrix[4] += dx;   currentMatrix[5] += dy;   newMatrix = "matrix(" + currentMatrix.join(' ') + ")";		    selectedElement.setAttributeNS(null, "transform", newMatrix);   currentX = evt.clientX;   currentY = evt.clientY;  }  function deselectElement(evt){   if(selectedElement != 0){	selectedElement.removeAttributeNS(null, "onmousemove");	selectedElement.removeAttributeNS(null, "onmouseout");	selectedElement.removeAttributeNS(null, "onmouseup");   selectedElement = 0;   }  }]]> </script><!--Bezier Curves--><g id="Curves and Lines" stroke="red" stroke-width="10" fill="none">  <path id = "CurveA" d = "M 10,170 Q 10,20 160,20"/>  <path id = "CurveB" d = "M 160,20 Q 310,20 310,170"/>  <path id = "LineA" d = "M 310,170 L 310,205"/>  <path id = "LineB" d = "M 310,200 L 65,200"/>  <path id = "CurveC" d = "M 70,200 Q 70,290 160,290"/>  <path id = "CurveD" d = "M 160,290 Q 250,290 250,230"/>  <path id = "LineC" d = "M 246,231 L 313,253"/>  <path id = "CurveE" d = "M 310,250 Q 310,350 160,350"/>  <path id = "CurveF" d = "M 160,350 Q 10,350 10,200"/>  <path id = "LineD" d = "M 10,200 L 10,170"/>  <path id = "CurveG" d = "M 70,170 Q 70,80 160,80"/>  <path id = "CurveH" d = "M 160,80 Q 250,80 250,170"/>  <path id = "LineE" d = "M 255,170 L 65,170"/></g><!--Point Labels--><g id="letters" font-size="30" font="sans-serif" fill="black" stroke="none">  <text x="18" y="50">A</text>  <text x="280" y="50">B</text>  <text x="75" y="280">C</text>  <text x="225" y="280">D</text>  <text x="280" y="340">E</text>  <text x="18" y="340">F</text>  <text x="75" y="110">G</text>  <text x="225" y="110">H</text></g><!--Control Lines--><g id="Control Lines" stroke="black" stroke-width="2">  <path id = "A_LineP0-P1" d = "M 10,170 L 10,20"/>  <path id = "A_LineP1-P2" d = "M 10,20 L 160,20"/>  <path id = "B_LineP0-P1" d = "M 160,20 L 310,20"/>  <path id = "B_LineP1-P2" d = "M 310,20 L 310,170"/>  <path id = "C_LineP0-P1" d = "M 70,200 L 70,290"/>  <path id = "C_LineP1-P2" d = "M 70,290 L 160,290"/>  <path id = "D_LineP0-P1" d = "M 160,290 L 250,290"/>  <path id = "D_LineP1-P2" d = "M 250,290 L 250,230"/>  <path id = "E_LineP0-P1" d = "M 310,250 L 310,350"/>  <path id = "E_LineP1-P2" d = "M 310,350 L 160,350"/>  <path id = "F_LineP0-P1" d = "M 160,350 L 10,350"/>  <path id = "F_LineP1-P2" d = "M 10,350 L 10,200"/>  <path id = "G_LineP0-P1" d = "M 70,170 L 70,80"/>  <path id = "G_LineP1-P2" d = "M 70,80 L 160,80"/>  <path id = "H_LineP0-P1" d = "M 160,80 L 250,80"/>  <path id = "H_LineP1-P2" d = "M 250,80 L 250,170"/></g><!--Point Markers--><g stroke="black" stroke-width="3" fill="black">  <circle class="draggable" id="pointA_P0" cx="10" cy="170" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointA_P1" cx="10" cy="20" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointA_P2" cx="160" cy="20" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointB_P1" cx="310" cy="20" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointB_P2" cx="310" cy="170" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointC_P0" cx="70" cy="200" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointC_P1" cx="70" cy="290" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointC_P2" cx="160" cy="290" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointD_P1" cx="250" cy="290" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointD_P2" cx="250" cy="230" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointE_P0" cx="310" cy="250" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointE_P1" cx="310" cy="350" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointE_P2" cx="160" cy="350" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointF_P1" cx="10" cy="350" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointF_P2" cx="10" cy="200" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointG_P0" cx="70" cy="170" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointG_P1" cx="70" cy="80" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointG_P2" cx="160" cy="80" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointH_P1" cx="250" cy="80" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/>  <circle class="draggable" id="pointH_P2" cx="250" cy="170" r="5" transform="matrix(1 0 0 1 0 0)" onmousedown="selectElement(evt)"/></g></svg>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...