Welche Svg-Bibliothek ist kompatibel mit interact.js?

-1

Ich möchte ein Drag & Drop-Feld auf meiner Website mit ziehbaren Elementen, einige von Adobe Illustrator exportiert und als img eingebettet, einige mit einer Svg-Bibliothek wie Svg.js erstellt, weil sie änderbar sein müssen. Ich suche nach einer Möglichkeit, beides im selben Feld zu bewegen.Welche Svg-Bibliothek ist kompatibel mit interact.js?

Ich habe versucht, den Code des ersten Beispiels (Ziehen) von der Website http://interactjs.io/ auf diesem svg.js erzeugten Element zu verwenden:

<body> 
    <div id="drawing" class="draggable"></div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.5.0/svg.js"></script> 
    <script> 
    var draw = SVG('drawing').size(400,400); 
    draw.rect(130, 30).attr({'x': 30, 'y': 80, 'fill': 'black'}); 
    </script> 
</body>

Interact.js können die Elemente img schön, bewegen, aber nicht die Elemente, die von svg.js generiert werden Ich kann das Rechteck nur auf der Y-Achse verschieben und die ganze rechte Seite der Seite neben dem Rechteck kann ziehbar werden.

Ist es möglich, sowohl mit eingebetteten und Code-generierten Svg mit der gleichen js-Bibliothek zu arbeiten? Oder sollte ich zwei Bibliotheken verwenden? Am Ende brauche ich die Koordinaten der Elemente auf dem Feld.

Quelle

2017-03-22 KatiKiss

Unten ist ein Beispiel, das svg Elemente zieht. Es benötigt keine Bibliothek. Es behandelt auch Elemente, die zuvor transformiert wurden, bevor das Ziehen/Ablegen auf einem Element implementiert wurde. Jedes svg-Element, das Sie ziehen möchten, muss nur die Klasse "dragTarget" enthalten. Dies kann in jedem Element hinzugefügt werden. das Beispiel Versuchen Sie unter:

<!DOCTYPE HTML> 
 

 
<html> 
 
<head> 
 
    <title>Drag SVG</title> 
 
</head> 
 
<body> 
 
SVG Drag/Drop is also applied to previously transformed elements (see maroon rectangle). 
 
<div style=background:gainsboro;width:300px;height:300px> 
 
<svg id="mySVG" width="300" height="300" onmousedown="startDrag(evt)" onmousemove="drag(evt)" onmouseup="endDrag()"> 
 
<circle style=cursor:move class="dragTarget" id="redCircle" cx="90" cy="80" r="30" fill="red" stroke="black" stroke-width="2" style="cursor:default" ></circle> 
 
<circle style=cursor:move class="dragTarget" id="orangeCircle" cx="200" cy="200" r="20" fill="orange" stroke="black" stroke-width="2" ></circle> 
 
<rect style=cursor:move transform="translate(100,100)scale(1.2,.8)" class="dragTarget" id="maroonRect" x="120" y="150" width="30" height="30" fill="maroon" stroke="black" stroke-width="2"></rect> 
 
<rect style=cursor:move class="dragTarget" id="blueRect" x="40" y="60" width="30" height="15" fill="blue" stroke="black" stroke-width="2"></rect> 
 
</svg> 
 
</div> 
 
<script> 
 
var TransformRequestObj 
 
var TransList 
 
var DragTarget=null; 
 
var Dragging = false; 
 
var OffsetX = 0; 
 
var OffsetY = 0; 
 
//---mouse down over element--- 
 
function startDrag(evt) 
 
{ 
 
\t if(!Dragging) //---prevents dragging conflicts on other draggable elements--- 
 
\t { 
 
\t \t if(evt.target.getAttribute("class")=="dragTarget") 
 
\t \t { 
 
\t \t \t DragTarget = evt.target; 
 
\t \t \t //---reference point to its respective viewport-- 
 
\t \t \t var pnt = DragTarget.ownerSVGElement.createSVGPoint(); 
 
\t \t \t pnt.x = evt.clientX; 
 
\t \t \t pnt.y = evt.clientY; 
 
\t \t \t //---elements transformed and/or in different(svg) viewports--- 
 
\t \t \t var sCTM = DragTarget.getScreenCTM(); 
 
\t \t \t var Pnt = pnt.matrixTransform(sCTM.inverse()); 
 

 
\t \t \t TransformRequestObj = DragTarget.ownerSVGElement.createSVGTransform() 
 
\t \t \t //---attach new or existing transform to element, init its transform list--- 
 
\t \t \t var myTransListAnim=DragTarget.transform 
 
\t \t \t TransList=myTransListAnim.baseVal 
 

 
\t \t \t OffsetX = Pnt.x 
 
\t \t \t OffsetY = Pnt.y 
 

 
\t \t \t Dragging=true; 
 
\t \t } 
 
\t } 
 
} 
 
//---mouse move--- 
 
function drag(evt) 
 
{ 
 
\t if(Dragging) 
 
\t { 
 
\t \t var pnt = DragTarget.ownerSVGElement.createSVGPoint(); 
 
\t \t pnt.x = evt.clientX; 
 
\t \t pnt.y = evt.clientY; 
 
\t \t //---elements in different(svg) viewports, and/or transformed --- 
 
\t \t var sCTM = DragTarget.getScreenCTM(); 
 
\t \t var Pnt = pnt.matrixTransform(sCTM.inverse()); 
 
\t \t Pnt.x -= OffsetX; 
 
\t \t Pnt.y -= OffsetY; 
 

 
\t \t TransformRequestObj.setTranslate(Pnt.x,Pnt.y) 
 
\t \t TransList.appendItem(TransformRequestObj) 
 
\t \t TransList.consolidate() 
 
\t } 
 
} 
 
//--mouse up--- 
 
function endDrag() 
 
{ 
 
\t Dragging = false ; 
 

 
} 
 
</script> 
 
</body> 
 

 
</html>

Quelle

2017-03-22 15:41:17

Dank für Ihre Antwort danken, werde ich auf jeden Fall einen Blick auf Ihre Lösung. Ich habe versehentlich die Lösung für das erste Problem zwischen svg.js und interact.js herausgefunden. Jedes html-Element muss eine definierte Breite und Höhe haben, ansonsten kann es mit interact.js nicht korrekt verschoben werden. – KatiKiss

Welche Svg-Bibliothek ist kompatibel mit interact.js?

Antwort

Verwandte Themen