1

我有一个画十字的小画布和一个用于控制旋转角度的输入框。

 <input type='text' ng-model='angle'>
    <canvas id="myLitleCanvas" width="200" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myLitleCanvas');
      var context = canvas.getContext('2d');
      context.save();

      context.translate(100, 100);
      context.rotate({{angle}} * Math.PI / 180.0); // <---- problem
      context.translate(-100, -100);

      context.beginPath();
      context.moveTo(100, 0);
      context.lineTo(100, 200);
      context.moveTo(0, 100);
      context.lineTo(200, 100);
      context.stroke();
    </script>

然后我有一个非常简单的控制器绑定到angle

function MapCtrl($scope) { 
    $scope.angle = 45;
}

angle但是当文本框中的值发生变化时，我似乎无法访问或重绘画布。这甚至可能吗？

4

2 回答 2

1

javascript 块中没有令牌替换。进行 DOM 操作的推荐方法是将您的 javascript 代码放入指令中。然后，您将拥有一个引用您的“角度”参数的属性。您可能想查看angular-ui以了解有关执行自定义 UI 指令的想法。希望这可以帮助。

于 2013-05-09T00:04:29.107 回答
1

如前所述，javascript 块中没有令牌替换。

要使其正常工作...使用控制器从脚本块中移动代码。只需简单地访问角度为$scope.angle。您还可以编写一个rotateAndRedraw函数并绑定到ng-click或其他：

$scope.rotateAndRedraw = function (angle) {
      context.clearRect(x,y,width,height);
      context.translate(100, 100);
      context.rotate(angle * Math.PI / 180.0);
      context.translate(-100, -100);

      context.beginPath();
      context.moveTo(100, 0);
      context.lineTo(100, 200);
      context.moveTo(0, 100);
      context.lineTo(200, 100);
      context.stroke();
};

您还可以将所有这些画布代码包装在一个指令中，并轻松地在一个页面上多次复制画布。

于 2013-12-11T15:22:19.113 回答