1
Ich versuche, die sich drehen Funktionalität zu verwenden, die von der Halo bewiesen,Joint js Rotation funktioniert nicht ordnungsgemäß mit benutzerdefinierten SVG-Elemente
Ich habe ein Element in die Schablone wie folgt hinzugefügt ..
var customMarkup = ' <path id="path123" stroke="#000000" stroke-miterlimit="10" d="M7.2,28V15.7L20.3,4.1l9-0.6v8.8c0,0-9,5-9,8.6 c0,1.7,0,7.2,0,7.2H7.2z"/> <polyline id="polyline125" stroke="#000000" stroke-miterlimit="10" points="20.1,4.3 20.1,2.4 32.2,2.4 30.4,11.8 29.3,11.8 "/> <g id="g127"> <path id="path129" stroke="#000000" stroke-miterlimit="10" d="M32.2,2.4h1.9c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4L43,2.8c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4L56,2.8c0-0.2,0.2-0.4,0.4-0.4h0.4c0.2,0,0.4,0.2,0.4,0.4l0.1,4.9 c0,0.2,0.2,0.4,0.4,0.4h1c0.2,0,0.4-0.2,0.4-0.4l0.1-4.9c0-0.2,0.2-0.4,0.4-0.4h3c2.1,0,2.7,1.2,2.7,2.2v4.9c0,0.7-0.6,1.2-1.2,1.2 H30.6"/> </g> <polyline id="polyline131" stroke="#000000" stroke-miterlimit="10" points="68.8,4 74.2,4 74.2,9.2 68.8,9.2 "/> <g id="g133"> <line id="line135" stroke="#000000" stroke-miterlimit="10" x1="68.6" y1="5.6" x2="66.3" y2="5.6"/> <line id="line137" stroke="#000000" stroke-miterlimit="10" x1="66.5" y1="7.6" x2="68.8" y2="7.6"/> <path id="path139" stroke="#000000" stroke-miterlimit="10" d="M68.6,5.6c0,0,0.1,0.8,0.1,1c0,0.3-0.1,1-0.1,1 s0.1,0.8,0.1,1s-0.1,1-0.1,1h-2.8c0,0-0.1-0.8-0.1-1s0.1-1,0.1-1s-0.1-0.8-0.1-1s0.1-1,0.1-1v0c0,0-0.1-0.8-0.1-1 c0-0.3,0.1-1,0.1-1h2.8c0,0,0.1,0.8,0.1,1C68.8,4.8,68.6,5.6,68.6,5.6L68.6,5.6z"/> </g> <line id="line141" stroke="#000000" stroke-miterlimit="10" x1="16.4" y1="7.5" x2="11.6" y2="7.5"/> <line id="line143" stroke="#000000" stroke-miterlimit="10" x1="11.6" y1="10.1" x2="13.5" y2="10.1"/> <path id="path145" stroke="#000000" stroke-miterlimit="10" d="M11.6,11.9c0,0-0.2-0.1-0.2-0.4c0-0.3,0.2-1.3,0.2-1.3 s-0.2-1-0.2-1.3c0-0.3,0.2-1.3,0.2-1.3v0c0,0-0.2-1-0.2-1.3c0-0.3,0.2-1.3,0.2-1.3h4.9c0,0,0.2,1,0.2,1.3c0,0.3-0.2,1.3-0.2,1.3v0" /> <g id="g147"> <line id="line149" stroke="#000000" stroke-miterlimit="10" x1="10.2" y1="7.5" x2="9" y2="7.5"/> <line id="line151" stroke="#000000" stroke-miterlimit="10" x1="9" y1="10.1" x2="10.3" y2="10.1"/> <path id="path153" stroke="#000000" stroke-miterlimit="10" d="M10.2,7.2c0,0,0.1,1.1,0.1,1.5c0,0.4-0.1,1.5-0.1,1.5 s0.1,1.1,0.1,1.5c0,0.4-0.1,1.1-0.1,1.1H9c0,0-0.1-0.7-0.1-1.1c0-0.4,0.1-1.5,0.1-1.5S8.9,9.1,8.9,8.7C8.9,8.3,9,7.2,9,7.2v0 c0,0-0.1-1.1-0.1-1.5C8.9,5.3,9,4.9,9,4.9h1.2c0,0,0.1,0.5,0.1,0.8C10.3,6.1,10.2,7.2,10.2,7.2L10.2,7.2z"/> </g> <path id="path155" stroke="#000000" stroke-miterlimit="10" d="M38.6,19.8v0.5c-0.4,0.2-0.5,0.7-0.5,0.7l0,1.4 c0,0.7,2.1,0.5,4.2,0.5c2.2,0,4.3,0.1,4.3-0.6l0-1.3c0,0,0.1-0.5-0.4-0.8v-0.5"/> <path id="path157" stroke="#000000" stroke-miterlimit="10" d="M39.2,12.9v0.4c-0.3,0.1-0.2,0.4-0.2,0.4l0,0.6 c0,0.6,6.8,0.5,6.8,0v-0.5c0,0,0.1-0.4-0.2-0.6v-0.4"/> <path id="path159" stroke="#000000" stroke-miterlimit="10" d="M38.9,13.8c-0.4,0.2-0.7,0.3-0.8,0.8c0,0.2,0,0.8,0,0.8 c0,0.7,8.5,0.7,8.5-0.1c0,0,0-0.5,0-0.7c0-0.4-0.4-0.6-0.9-0.8"/> <path id="path161" stroke="#000000" stroke-miterlimit="10" d="M38.6,15.6v2.6c-0.4,0.2-0.5,0.7-0.5,0.7l0,0.7 c0,0.7,8.5,0.7,8.5-0.1l0-0.7c0,0,0.1-0.5-0.4-0.8v-2.6"/> <path id="path163" stroke="#000000" stroke-miterlimit="10" d="M38.1,20.9c0,0.7,8.5,0.7,8.5-0.1"/> <path id="path165" stroke="#000000" stroke-miterlimit="10" d="M38.1,18.7c0,0.7,8.5,0.7,8.5-0.1"/> <path id="path167" stroke="#000000" stroke-miterlimit="10" d="M39,13c0.7,0,1.6,0.1,3.4,0.1c1.7,0,3.2-0.2,3.4-0.2"/> <path id="path169" stroke="#000000" stroke-miterlimit="10" d="M38.1,15.2c0,0.7,8.5,0.7,8.5-0.1"/> <polygon id="polygon171" stroke="#000000" stroke-miterlimit="10" points="46.6,24.6 38.1,24.4 38.1,22.5 40,22.9 44.8,22.9 46.6,22.4 "/> <polygon id="polygon173" stroke="#000000" stroke-miterlimit="10" points="50.8,26.2 33.8,26.1 33.8,24.7 50.8,24.5 "/> <polygon id="polygon175" stroke="#000000" stroke-miterlimit="10" points="48.3,28.1 36.3,28 36.3,26.6 48.3,26.4 "/> <polyline id="polyline177" stroke="#000000" stroke-miterlimit="10" points="17.3,6.9 17.3,3.5 20.1,3.5 "/> <path id="path179" stroke="#000000" stroke-miterlimit="10" d="M16.5,4.9c0.1-0.6,0.2-1,0.3-1c0.2,0,0.4,1.1,0.5,2.8"/> <path id="path181" stroke="#000000" stroke-miterlimit="10" d="M11.4,12c0,0-0.2,0.4-0.6,0.4c-0.6,0-0.6-0.4-0.6-0.4 V5.6c0,0,0.1-0.3,0.6-0.3c0.6,0,0.6,0.3,0.6,0.3V12z"/> <path id="path183" stroke="#000000" stroke-miterlimit="10" d="M5,10.8c0,0,0,0.2-0.4,0.2s-0.4-0.2-0.4-0.2v-4 c0,0,0.1-0.2,0.4-0.2C5,6.6,5,6.8,5,6.8V10.8z"/> <rect id="rect185" x="5" y="7" stroke="#000000" stroke-miterlimit="10" width="1.3" height="3.5"/> <polygon id="polygon187" stroke="#000000" stroke-miterlimit="10" points="8.9,11.7 6.3,11.7 6.3,8.8 6.3,6 8.9,6 "/> <rect id="rect189" x="6.7" y="33" stroke="#000000" stroke-miterlimit="10" width="59.8" height="64"/> <polygon id="polygon191" stroke="#000000" stroke-miterlimit="10" points="58.5,28.1 55.1,28.1 55.7,10.8 57.8,10.8 "/> <polygon id="polygon193" stroke="#000000" stroke-miterlimit="10" points="64.3,28.1 60.8,28.1 61.5,10.8 63.6,10.8 "/> <g id="g195"> <path id="path197" stroke="#000000" stroke-miterlimit="10" d="M72.9,31.5c0,0.8-0.7,1.5-1.5,1.5H1.8 c-0.8,0-1.5-0.7-1.5-1.5v-2C0.3,28.7,1,28,1.8,28h69.6c0.8,0,1.5,0.7,1.5,1.5V31.5z"/> </g> <g id="g199"> <path id="path201" stroke="#000000" stroke-miterlimit="10" d="M72.9,100.5c0,0.8-0.7,1.5-1.5,1.5H1.8 c-0.8,0-1.5-0.7-1.5-1.5v-2C0.3,97.7,1,97,1.8,97h69.6c0.8,0,1.5,0.7,1.5,1.5V100.5z"/> </g> <g id="g203"> <path id="path205" stroke="#000000" stroke-miterlimit="10" d="M68.6,72.7c0,0.8-0.7,1.5-1.5,1.5h-61 c-0.8,0-1.5-0.7-1.5-1.5v-2c0-0.8,0.7-1.5,1.5-1.5h61c0.8,0,1.5,0.7,1.5,1.5V72.7z"/> </g> <path id="path207" stroke="#000000" stroke-miterlimit="10" d="M4.3,10.4c0,0,0,0.2-0.7,0.2s-0.7-0.2-0.7-0.2V7.2 c0,0,0.2-0.1,0.7-0.1c0.7,0,0.7,0.1,0.7,0.1V10.4z"/>';
var customElement = joint.shapes.basic.Image({
markup: '<g class="scalable"><g class="rotatable"><g class="myClass">' + customMarkup+ '</g></g></g><text/>',
type: 'basic.Image1',
attrs: {
'text': { text: 'asdf' },
height: 500,
width: 100,
'.myClass': {
fill: '#ffffff'
}
}
})
Das Element sieht auf der Schablone gut aus und es sieht gut aus, wenn ich es auf das Papier ziehe,
Jetzt möchte ich es drehen, und ich habe eine wirklich harte Zeit zu versuchen, es geschehen zu lassen .
Falls ich das Element die Größe und dann versuchen, es zu drehen .. und dann die Größe wieder alle Transformationen vollständig wie im Bild oben sind Messing unten ..
las ich einen Artikel und lerne, dass die svg-rotationen nicht dem ähneln, was in css gemacht wird, also probierst du das folgende mit einem klick auf einen knopf, aber das hat auch nicht geholfen.
Mein Ziel ist es, die individuelle SVG Element im Halo zu halten, wenn sie sich dreht, und lassen Sie es nicht bis Skew
ich auch die Rotation auf der Klick auf eine Schaltfläche zu tun versucht, anstatt die Halo der Verwendung wie als folgt .. aber hilft nicht
jQuery('#btn-rotate').on('mousedown', _.bind(function (evt) {
var x = this.selection.models[0].attributes.position.x;
var y = this.selection.models[0].attributes.position.y
var height = this.selection.models[0].attributes.size.height;
var width = this.selection.models[0].attributes.size.width;
this.selection.models[0].rotate(93, [false, { x: x+width/2, y: y+height/2}]);
}, this));
Würde ich wirklich Ihre Hilfe zu schätzen wissen. Danke Vishu