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