Jump to content

Interactive SVG question


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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...