使用Angular旋轉矩形4點

Question

我有一個4點繪製的矩形。我需要旋轉所有點的任意程度，並找到新的x,y的points.I嘗試旋轉這些，但問題是當我會增加程度，矩形變得更小，當我會降低程度，第一個矩形不再繪製。我如何通過使用Angular來做到這一點。

<div ng-app="myApp"> 
    <div ng-app="myApp" ng-controller="rectController"> 
     <input type="number" ng-model="Rotation" min="-360" max="360" value="0"/> 
     <rect-rotate/> 
    </div> 
</div> 

下面是JavaScript代碼：

var App = angular.module('myApp', []); 
var Ctrl = App.controller('rectController', function($scope) { }); 

Ctrl.directive('rectRotate', function() { 

     function link(scope, el, attr) { 
      var w = 1200, h = 780; 
      var width = 300, height = 200; 
      var point1=[300,200],point2=[600,200],point3=[600,400],point4=[300,400]; 

      var svg = d3.select(el[0]).append("svg") 
       .attr("width", w) 
       .attr("height", h); 
      var newg = svg.append("g").data([{ x: width, y: height }]); 

      var rect = newg.append("path") 
       .attr("x", function(d) { 
        return d.x; 
       }) 
       .attr("y", function(d) { 
        return d.y; 
       }) 
       .attr("fill-opacity", .5) 
       .attr("d", function(d) { 

     var dCommand 
        = "M" + point1[0] + "," + point1[1] + "L" + point2[0] 
        + "," + point2[1] + "L " + point3[0] + "," + point3[1] 
        + "L " + point4[0] + "," + point4[1] + "Z"; 
        return dCommand; 
       }); 
     scope.$watch('Rotation', function (newValues) { 
      var rotateAngle = newValues; 
      rotateAngle = rotateAngle * Math.PI/180.0; 
      var centerX = (point1[0]+point3[0])/2; 
      var centerY = (point1[1]+point3[1])/2; 

//1 
point1[0] = (Math.cos(rotateAngle) * (point1[0] - centerX) 
      -(Math.sin(rotateAngle) * (point1[1] - centerY)) + centerX; 
point1[1] = (Math.sin(rotateAngle) * (point1[0] - centerX)) 
      +(Math.cos(rotateAngle) * (point1[1] - centerY)) + centerY; 

//2 
point2[0] = (Math.cos(rotateAngle) * (point2[0] - centerX) 
      -(Math.sin(rotateAngle) * (point2[1] - centerY)) + centerX; 
point2[1] = (Math.sin(rotateAngle) * (point2[0] - centerX)) 
      +(Math.cos(rotateAngle) * (point2[1] - centerY)) + centerY; 

//3 
point3[0] = (Math.cos(rotateAngle) * (point3[0] - centerX) 
      -(Math.sin(rotateAngle) * (point3[1] - centerY)) + centerX; 
point3[1] = (Math.sin(rotateAngle) * (point3[0] - centerX)) 
      +(Math.cos(rotateAngle) * (point3[1] - centerY)) + centerY; 

//4 
point4[0] = (Math.cos(rotateAngle) * (point4[0] - centerX) 
      -(Math.sin(rotateAngle) * (point4[1] - centerY)) + centerX; 
point2[1] = (Math.sin(rotateAngle) * (point4[0] - centerX)) 
      +(Math.cos(rotateAngle) * (point4[1] - centerY)) + centerY; 

rect.attr("d", function (d) { 

     var dCommand 
        = "M" + point1[0] + "," + point1[1] + "L" + point2[0] 
        + "," + point2[1] + "L " + point3[0] + "," + point3[1] 
        + "L " + point4[0] + "," + point4[1] + "Z"; 
        return dCommand; 
        }); 
     }return { 
      link: link 
     }; 

    }); 

Answer 1

您應該使用rotate屬性作爲拉斯Kotthoff已經提到。

由於您基本上正在創建矩形，所以爲了方便起見，我用svg:rect替換了path。以下代碼通過旋轉g元素進行旋轉。這樣你可以裝入任何數量的形狀，它們會正確旋轉。

對於圍繞中心的g元件旋轉我通過將寬度的一半和高度的元素的其x和y位置計算出的中心。

var App = angular.module('myApp', []); 
var Ctrl = App.controller('rectController', function($scope) { }); 

Ctrl.directive('rectRotate', function() { 
    function link(scope, el, attr) { 
    var w = 1200, h = 780; 
    var width = 300, height = 200, positionX = 300, positionY = 200; 

    var svg = d3.select(el[0]).append("svg") 
     .attr("width", w) 
     .attr("height", h); 

    var newg = svg.append("g"); 

    var rect = newg.append("rect") 
     .attr("x", positionX) 
     .attr("y", positionY) 
     .attr("fill-opacity", .5) 
     .attr("width", width) 
     .attr("height", height); 

    scope.$watch('Rotation', function (newValues) { 

     var rotateAngle = newValues || 0; 
     newg.attr("transform","rotate(" + rotateAngle + " "+ (positionX + width/2) +" "+ (positionY + height/2) +")"); 
    }); 
    } 
    return {link: link}; 
}); 

Answer 2

有很多方法可以旋轉點。您可以使用矩陣旋轉點。你的點座標是多個矩陣。這裏是鏈接，可以幫助你。

http://www.euclideanspace.com/maths/geometry/affine/aroundPoint/

Rotate point in rectangle