Question

有没有办法从Angular的指令更新画布弧？我想更新开始/结束角度，半径和颜色。

这是HTML：

<canvas class="canvasIndicator" ng-style="styleArcByCurrentStatus()"></canvas>`

这是我的指示

    (function (angular) {
    'use strict';
    var app = angular.module('mdlName.directives');

    app.directive('directiveName', [function(){
        return{
            restrict: 'E',
            replace: true,
            templateUrl:'directiveTpl.html',

            scope:{
            },

            link: function(scope, element, attrs){
                scope.canvasIndicator = angular.element( document.querySelector(".canvasIndicator"));
                scope.canvasContext = scope.canvasIndicator.context.getContext("2d");

                scope.secondsParameters = {x: 49, y:68, radius:12, lineWidth:25, color:'#80dcf1'};

                var x = scope.secondsParameters.x,
                    y = scope.secondsParameters.y,
                    radius = scope.secondsParameters.radius;

                scope.canvasContext.arc(x, y, radius, (1.5 * Math.PI), Math.PI, true);

                scope.canvasContext.lineWidth = scope.secondsParameters.lineWidth;
                scope.canvasContext.strokeStyle = scope.secondsParameters.color;
                scope.canvasContext.stroke();

                scope.styleArcByCurrentStatus = function(){
                    var x = scope.secondsParameters.x,
                        y = scope.secondsParameters.y,
                        radius = scope.secondsParameters.radius;

                    scope.canvasContext.arc(x, y, radius, (1 * Math.PI), Math.PI, true);

                    scope.canvasContext.lineWidth = Math.floor(Math.random()*(20-1+1)+1);
                    scope.canvasContext.strokeStyle = scope.secondsParameters.color;
                    scope.canvasContext.stroke();
                }
            }
        }
    }]);

})(angular);

ng-style的用法仅用于捕获角度的摘要循环以更新弧。在这个例子中，我尝试更新弧的线宽，但也需要更新弧的起始角度，结束角度......

调用链接函数并调用“styleArcByCurrentStatus”（对于每个摘要循环）

这可能吗？可以通过Angular动态更新弧吗？

非常感谢。

如何通过Angular指令更新Canvas Arc？

0 个答案: