AngularJS - SVG拖動一個旋轉元素

Question

我有一個問題，旋轉SVG元素與自己的座標空間。正常的拖放不起作用。例如：元素向右而不是向上移動，而不是向下移動。我正在尋找一個簡單的解決方案，對具有不同度數設置的SVG元素使用正常的拖放操作。

的演示可以在這裏看到http://jsfiddle.net/jmdajkkb/

的HTML瀏覽：

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

的JavaScript：

function myController($scope) { 
    $scope.element = { 
       "x": 350, 
       "y": 50, 
       "rotation": { 
        "degree": 60, 
        "x": 50, 
        "y": 50 
       } 
      }; 

    var isDragging = false, x, y;  

    $scope.elementMouseDown = function(eventArgs){ 
     isDragging = true; 
     x = eventArgs.clientX; 
     y = eventArgs.clientY; 
    }; 

    $scope.mouseMove = function(eventArgs) { 
     if(isDragging) { 
      $scope.element.x += eventArgs.clientX - x; 
      $scope.element.y += eventArgs.clientY - y; 

      x = eventArgs.clientX; 
      y = eventArgs.clientY; 
     }; 
    }; 

    $scope.mouseUp = function() { 
     isDragging = false; 
    }; 
} 

順便說一句，如果 「拖放」 邏輯放在控制器還是在一個指令？

UPDATE

是的，額外的翻譯在變換它的工作原理。但在我的項目中，我們有一個更復雜的場景。

用戶可以在運行時插入更多元素（矩形）。他可以通過點擊選擇一個元素並使用拖動或旋轉特徵。選擇元素可在包含圓圈的單獨組中使用。

Here`s新的代碼，以獲得更好的視野：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 
}; 

}）;從戈蘭