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 ブロックにはトークンの置換はありません。

これを機能させるには...コントローラーを使用してスクリプトブロックからコードを移動します。として角度にアクセスするだけです$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 に答える
1

JavaScript ブロックにはトークンの置換はありません。DOM 操作の推奨される方法は、JavaScript コードをディレクティブに入れることです。次に、「角度」パラメーターを参照する属性があります。カスタム UI ディレクティブの実行に関するアイデアについては、 angular-uiを参照してください。お役に立てれば。

于 2013-05-09T00:04:29.107 に答える