Question

我遇到了带有自己坐标空间的旋转SVG元素的问题。正常的拖放不起作用。例如：元素向右移动而不是向上和向左而不是向下移动。我正在寻找一个简单的解决方案，使用普通的拖放功能来设置不同程度的SVG Elements。

HTML - 视图：

Group.objects.filter(translatedfoo__language_code='x', translatedfoo__country='y')

JavaScript的：

<div ng-app>
    <div ng-controller="myController">
        <svg style="height: 612px; width: 612px;" ng-mouseup="mouseUp()" ng-mousemove="mouseMove($event)">
            <rect fill="orange" width="100" height="100" ng-mousedown="elementMouseDown($event)"  ng-attr-x="{{element.x}}" ng-attr-y="{{element.y}}" ng-attr-transform="rotate({{element.rotation.degree}}, {{element.rotation.x}}, {{element.rotation.y}})" />
        </svg>
    </div> 
</div>

顺便说一下，“拖放”逻辑应该放在控制器中还是指令中？

更新

是的，在转换中有额外的转换它可以工作。但在我的项目中，我们有一个更复杂的场景。

用户可以在运行时插入更多元素（矩形）。他可以通过点击选择一个元素并使用drag＆amp;放下或旋转功能。选择元素在带圆圈的单独组中可用。

以下是获取更好观点的新代码：http://jsfiddle.net/kjaxdf8c/

Answer 1

我找到了解决方案。这是代码，它有效：

   app.directive('svgInternal', function () {
   var telo ='<g ng-mousedown="elementMouseDown($event)" ' +
   'ng-attr-transform=" translate({{element.x}},{{element.y}})'+
   'rotate({{element.rotation.degree}},'+
   '{{element.rotation.x}}, {{element.rotation.y}})">'+
   '<rect class="rect" fill="orange" width="100" height="100"'+
   ' '+
   '  />'+
   '<g class="rect" ng-show="isSelected" ng-attr-transform=" translate({{ 
   -element.x}},{{-element.y}})">'+ 

          '<circle fill="#3EA3DC" stroke-width="2" ng-attr-cx="
         {{elementSelections[0].x}}" ng-attr-cy="{{elementSelections[0].y}}" 
   r="8" />'+
            '<circle fill="#3EA3DC" stroke-width="2" ng-attr-cx="
   {{elementSelections[1].x}}" ng-attr-cy="{{elementSelections[1].y}}" r="8" 
   />'+
            '<circle fill="#3EA3DC" stroke-width="2" ng-attr-cx="
   {{elementSelections[2].x}}" ng-attr-cy="{{elementSelections[2].y}}" r="8"  
   />'+
            '<circle fill="#3EA3DC" stroke-width="2" ng-attr-cx="
   {{elementSelections[3].x}}" ng-attr-cy="{{elementSelections[3].y}}" r="8" 
  />'+

        '</g><text x="0" y="15" fill="red">{{element.x}}</text></g>';

return {
  templateNamespace: 'svg',
  template: telo,
  restrict: 'E',
  replace: true
};

}）;

Goran致以最诚挚的问候

AngularJS - SVG拖动旋转的元素

1 个答案: