Question

我正在尝试使用Halo证明的旋转功能，

我在这个模板中添加了一个元素..

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'
                                    }
                                }
                            })

Stencil上的元素看起来很好，当我拖动它并将其放到纸上时看起来不错，

现在我想轮换它，我正在努力实现这一目标。

如果我调整元素的大小，然后尝试旋转它...然后再次调整它的大小，所有的变换都完全搞乱，如下图所示。

我读了一篇文章并了解到svg旋转与css中的操作并不相似，所以在点击按钮时尝试以下操作，但这也无济于事。

我的目标是在旋转时将自定义SVG元素保持在光环内并且不允许它倾斜

我也尝试按下按钮而不是像下面那样使用Halo进行旋转..但没有帮助

  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));

真的很感谢你的帮助。谢谢 Vishu

Answer 1

不支持将可旋转组嵌套到JointJS中的可伸缩组中。可以省略（一起或单独）组，或者可伸缩组可以是可旋转组的子组。只能使用以下方案。

<g class="rotatable"/><g class="scalable"></g></g>
<g class="rotatable"></g>
<g class="scalable"></g>

在您的情况下，需要交换可旋转和可扩展的组。

<g class="rotatable"><g class="scalable"><g class="myClass"><!-- custom markup --></g></g></g><text/>

有关详情，请参阅http://googlegeodevelopers.blogspot.com/。

联合js旋转无法与自定义SVG元素

1 个答案: