Jump to content

delta9857

Members
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About delta9857

  • Rank
    Newbie
  1. 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>
×
×
  • Create New...