如何在以角指令转换帆布 [英] How convert canvas in to angular directive

查看：104
本文介绍了如何在以角指令转换帆布的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你能帮助我这个integrete code到角指令？结果我都尝试过，但得到了很多错误，例如：元素[0] .getContext不是一个函数。结果

我已经尝试了很多东西....结果
尝试拨打的getContext在模板元素这样的结果
VAR圈= angular.element（元素[0] .querySelector（'xxxClass。'））;结果
VAR CTX = circle.getContext（'2D'）;结果

下面是一个code。

\r
\r

VAR应用= angular.module（'XXX'，[]）;\r
app.controller（'xxxCtrl'，函数（）{}）;\r
app.directive（'xxxItem'，函数（）{\r
        VAR链接=功能（范围，元素）{\r
            VAR圈= angular.element（元素[0] .querySelector（'xxxClass。'））;\r
\r
\r
            VAR的选择= {\r
                尺寸：125，\r
                百分比：circle.percent || 50，\r
                定时器：circle.timer || 100，\r
                马克斯：circle.timer || 100，\r
                lineColor：circle.lineColor || 红，\r
                timerColor：circle.timerColor || 绿色，\r
                的lineWidth：3，\r
                旋转：0\r
            };\r
\r
            VAR帆布= angular.element（'＆LT;＆帆布GT;＆LT; /帆布＆GT;'）;\r
            VAR跨度= angular.element（'＆LT;跨度＆GT;＆LT; / SPAN＆GT;'）;\r
\r
            如果（typeof运算（G_vmlCanvasManager）！​​==未定义）{\r
                G_vmlCanvasManager.initElement（画布）;\r
            }\r
\r
            circle.appendTo（跨度）;\r
            circle.appendTo（画布）;\r
\r
            变种CTX =元素[0] .getContext（'2D'）;\r
            canvas.width = canvas.height = options.size;\r
\r
\r
            变种circleMargin = 10;\r
            VAR半径=（options.size - options.lineWidth - circleMargin）/ 2;\r
            VAR to_rad = Math.PI / 180;\r
            VAR画圆=功能（颜色，线宽百分比）{\r
                ctx.save（）;\r
                ctx.translate（options.size / 2，options.size / 2）;\r
                ctx.rotate（（ - 1 / + options.rotate / 180）* Math.PI）;\r
                百分比= Math.min（Math.max（0，百分比|| 1），1）;\r
                ctx.beginPath（）;\r
                ctx.arc（0，0，半径，0，Math.PI * 2 *百分比，假）;\r
                ctx.strokeStyle =颜色;\r
                ctx.lineCap ='圆';\r
                ctx.lineWidth =的lineWidth;\r
                ctx.stroke（）;\r
                ctx.restore（）;\r
            };\r
\r
            功能drawArrow（颜色，百分比）{\r
                百分比= Math.min（Math.max（0，百分比|| 1），1）;\r
                如果（百分比== 1）返回;\r
                ctx.save（）;\r
                ctx.fillStyle =颜色;\r
                ctx.translate（options.size / 2，options.size / 2）;\r
                ctx.rotate（（ - 1 / + options.rotate / 180）* Math.PI）;\r
                ctx.beginPath（）;\r
                ctx.rotate（Math.PI * 2 *百分比）;\r
\r
                变种arrowWidth = 10;\r
                变种arrowHeight = 8;\r
\r
                ctx.moveTo（半径 - （arrowWidth / 2），0）;\r
                ctx.lineTo（半径+（arrowWidth / 2），0）;\r
                ctx.lineTo（半径，arrowHeight）;\r
                ctx.lineTo（半径 - （arrowWidth / 2），0）;\r
                ctx.fill（）;\r
                ctx.restore（）;\r
            }\r
\r
            功能drawTicks（颜色，秒）{\r
                VAR to_rad = Math.PI / 180;\r
                ctx.save（）;\r
                ctx.translate（options.size / 2，options.size / 2）;\r
                ctx.rotate（-90 * to_rad）;\r
                ctx.lineWidth = 1;\r
                ctx.strokeStyle =颜色;\r
\r
                VAR角=60分之360;\r
                VAR tickSize = 14;\r
                变种tickMargin = 8;\r
\r
                VAR stepTime =角度*秒/ options.max * 10;\r
                对于（VAR I = 0;我LT＆= stepTime;我++）{\r
                    ctx.save（）;\r
                    ctx.rotate（（360-（I *角））* to_rad）;\r
                    ctx.beginPath（）;\r
                    ctx.moveTo（半径 - tickSize - tickMargin，0）;\r
                    ctx.lineTo（半径 - tickMargin，0）;\r
                    ctx.stroke（）;\r
                    ctx.restore（）;\r
                }\r
                ctx.restore（）;\r
            }\r
\r
            功能渲染（）{\r
                ctx.clearRect（0，0，ctx.canvas.width，ctx.canvas.height）;\r
                --options.timer;\r
                如果（options.timer℃，）{options.timer = options.max}\r
                VAR秒= options.timer;\r
                变种大小= - （options.timer - （（options.max / options.timer）*秒））;\r
\r
                画圆（options.lineColor，options.lineWidth，options.percent / 100）;\r
                drawArrow（options.lineColor，options.percent / 100）;\r
                drawTicks（options.timerColor，大小）;\r
                span.innerHTML =＆LT; B＆gt;中+秒+＆下; / B＆gt;中+＆LT; BR /＆gt;中+秒;\r
                的setTimeout（渲染，1000）;\r
            }\r
            渲染（）;\r
        };\r
\r
        返回{\r
            限制：E，\r
            范围： {\r
                百分： @，\r
                定时器：=定时器，\r
                lineColor：@，\r
                timerColor：@\r
            }，\r
            链接：链接，\r
            模板：\r
            '＆LT; D​​IV CLASS =xxxClass百分比=百分比计时器=计时器lineColor =lineColortimerColor =timerColor＆GT;＆LT; / DIV＆GT;'\r
        };\r
    }）;

\r

DIV {\r
  位置：相对;\r
  保证金：80px;\r
  宽度：220px;\r
  高度：220px;\r
}\r
帆布{\r
  显示：块;\r
  位置：绝对的;\r
  顶部：0;\r
  左：0;\r
}\r
跨度 {\r
    颜色：＃555;\r
    显示：块;\r
    行高：16px的;\r
    填充顶：90像素;\r
    文本对齐：中心;\r
    宽度：220px;\r
    FONT-FAMILY：无衬线;\r
    字体大小：25像素;\r
    字体重量：100;\r
    保证金左：5像素;\r
}\r
输入{\r
  宽度：200像素;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.5.0-beta.1/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=XXX＆GT;\r
    ＆LT; D​​IV NG控制器=xxxCtrl＆GT;\r
        ＆LT; XXX项百分比=80计时器=100lineColor =红数据timerColor =绿色＆GT;＆LT; / XXX项目＆GT;\r
        ＆LT; XXX项百分比=50计时器=50lineColor =蓝色数据timerColor =红色＆GT;＆LT; / XXX项目＆GT;\r
    ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r
\r


解决方案

您只是有点困惑的地方应该是元素，在这里应该是帆布。

因此​​，首先，圈子在code指的元素与 xxxClass css类，并在您code这样的：

 ＆LT; D​​IV CLASS =xxxClass百分比=百分比计时器=计时器lineColor =lineColortimerColor =timerColor＆GT;＆LT; / DIV＆GT;

所以，你必须jqLit​​e元素圈子，但jqLit​​e，的没有 appendTo 方法，这样看来你的意思是追加

接下来，元素 - 这jqLit​​e元素，其中申请指令，让您的情况下，它

 ＆LT; XXX项百分比=80计时器=100lineColor =红数据timerColor =绿色＆GT;＆LT; / XXX项目＆GT;

和

 ＆LT; XXX项百分比=50计时器=50lineColor =蓝色数据timerColor =红色＆GT;＆LT; / XXX项目＆GT;

所以，这不是一个画布，也没有 .getContext 功能。

所以，你只需要一点点改变你的code，你可以得到的东西是这样的：

\r
\r

VAR应用= angular.module（'XXX'，[]）;\r
app.controller（'xxxCtrl'，函数（）{}）;\r
app.directive（'xxxItem'，函数（）{\r
  VAR链接=功能（范围，元素）{\r
    VAR圈= angular.element（元素[0] .querySelector（'xxxClass。'））;\r
\r
    的console.log（圆，元素[0]）;\r
\r
    VAR的选择= {\r
      尺寸：125，\r
      百分比：scope.percent || 50，\r
      定时器：scope.timer || 100，\r
      马克斯：scope.timer || 100，\r
      lineColor：scope.lineColor || 红，\r
      timerColor：scope.timerColor || 绿色，\r
      的lineWidth：3，\r
      旋转：0\r
    };\r
\r
    VAR帆布= angular.element（'＆LT;＆帆布GT;＆LT; /帆布＆GT;'）;\r
    VAR跨度= angular.element（'＆LT;跨度＆GT;＆LT; / SPAN＆GT;'）;\r
\r
    如果（typeof运算（G_vmlCanvasManager）！​​==未定义）{\r
      G_vmlCanvasManager.initElement（画布）;\r
    }\r
\r
    circle.append（跨度）;\r
    circle.append（画布）;\r
\r
    变种CTX =帆布[0] .getContext（'2D'）;\r
    帆布[0] = .WIDTH帆布[0] .height = options.size;\r
\r
\r
    变种circleMargin = 10;\r
    VAR半径=（options.size - options.lineWidth - circleMargin）/ 2;\r
    VAR to_rad = Math.PI / 180;\r
    VAR画圆=功能（颜色，线宽百分比）{\r
      ctx.save（）;\r
      ctx.translate（options.size / 2，options.size / 2）;\r
      ctx.rotate（（ - 1 / + options.rotate / 180）* Math.PI）;\r
      百分比= Math.min（Math.max（0，百分比|| 1），1）;\r
      ctx.beginPath（）;\r
      ctx.arc（0，0，半径，0，Math.PI * 2 *百分比，假）;\r
      ctx.strokeStyle =颜色;\r
      ctx.lineCap ='圆';\r
      ctx.lineWidth =的lineWidth;\r
      ctx.stroke（）;\r
      ctx.restore（）;\r
    };\r
\r
    功能drawArrow（颜色，百分比）{\r
      百分比= Math.min（Math.max（0，百分比|| 1），1）;\r
      如果（百分比== 1）返回;\r
      ctx.save（）;\r
      ctx.fillStyle =颜色;\r
      ctx.translate（options.size / 2，options.size / 2）;\r
      ctx.rotate（（ - 1 / + options.rotate / 180）* Math.PI）;\r
      ctx.beginPath（）;\r
      ctx.rotate（Math.PI * 2 *百分比）;\r
\r
      变种arrowWidth = 10;\r
      变种arrowHeight = 8;\r
\r
      ctx.moveTo（半径 - （arrowWidth / 2），0）;\r
      ctx.lineTo（半径+（arrowWidth / 2），0）;\r
      ctx.lineTo（半径，arrowHeight）;\r
      ctx.lineTo（半径 - （arrowWidth / 2），0）;\r
      ctx.fill（）;\r
      ctx.restore（）;\r
    }\r
\r
    功能drawTicks（颜色，秒）{\r
      VAR to_rad = Math.PI / 180;\r
      ctx.save（）;\r
      ctx.translate（options.size / 2，options.size / 2）;\r
      ctx.rotate（-90 * to_rad）;\r
      ctx.lineWidth = 1;\r
      ctx.strokeStyle =颜色;\r
\r
      VAR角=60分之360;\r
      VAR tickSize = 14;\r
      变种tickMargin = 8;\r
\r
      VAR stepTime =角度*秒/ options.max * 10;\r
      对于（VAR I = 0;我LT＆= stepTime;我++）{\r
        ctx.save（）;\r
        ctx.rotate（（360 - （I *角））* to_rad）;\r
        ctx.beginPath（）;\r
        ctx.moveTo（半径 - tickSize - tickMargin，0）;\r
        ctx.lineTo（半径 - tickMargin，0）;\r
        ctx.stroke（）;\r
        ctx.restore（）;\r
      }\r
      ctx.restore（）;\r
    }\r
\r
    功能渲染（）{\r
      ctx.clearRect（0，0，ctx.canvas.width，ctx.canvas.height）;\r
      --options.timer;\r
      如果（options.timer℃，）{\r
        options.timer = options.max\r
      }\r
      VAR秒= options.timer;\r
      变种大小= - （options.timer - （（options.max / options.timer）*秒））;\r
\r
      画圆（options.lineColor，options.lineWidth，options.percent / 100）;\r
      drawArrow（options.lineColor，options.percent / 100）;\r
      drawTicks（options.timerColor，大小）;\r
      span.html（＆所述b取代;+秒+＆下; / B＆gt;中+＆所述峰; br /＆gt;中+秒）;\r
      的setTimeout（渲染，1000）;\r
    }\r
    渲染（）;\r
  };\r
\r
  返回{\r
    限制：E，\r
    范围： {\r
      百分： @，\r
      定时器：=定时器，\r
      lineColor：@，\r
      timerColor：@\r
    }，\r
    链接：链接，\r
    模板：'＆LT; D​​IV CLASS =xxxClass百分比=百分比计时器=计时器lineColor =lineColortimerColor =timerColor＆GT;＆LT; / DIV＆GT;'\r
  };\r
}）;

\r

/ *样式去这里* /\r
\r
帆布{\r
  显示：块;\r
  位置：相对;\r
  顶部：0;\r
  左：0;\r
}\r
跨度 {\r
  颜色：＃555;\r
  显示：块;\r
  行高：12px的;\r
  填充顶：42PX;\r
  文本对齐：中心;\r
  宽度：108px;\r
  FONT-FAMILY：无衬线;\r
  字体大小：10px的;\r
  文本转换：大写;\r
}\r
跨度B {\r
  字体大小：知识+;\r
}

\r

＆LT;脚本数据需要=angular.js@1.4.7数据-semver =1.4.7SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js＆GT;＆下; /脚本＆GT;\r
＆LT; D​​IV NG-应用=XXX＆GT;\r
  ＆LT; D​​IV NG控制器=xxxCtrl＆GT;\r
    ＆LT; XXX项百分比=80计时器=100linecolor =红数据timercolor =绿色＆GT;＆LT; / XXX项目＆GT;\r
    ＆LT; XXX项百分比=50计时器=50linecolor =蓝色数据timercolor =红色＆GT;＆LT; / XXX项目＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r
\r

Can you help me to integrete this code into an Angular directive?.
I have tried it but get a lot of errors, for instance: element[0].getContext is not a function.

I have tried a lot of things....
try call getcontext in template element like this
var circle = angular.element(element[0].querySelector('.xxxClass'));
var ctx = circle.getContext('2d');

Here is a code.

var app = angular.module('xxx', []);
app.controller('xxxCtrl', function () {});
app.directive('xxxItem', function () {
        var linked = function(scope, element) {
            var circle = angular.element(element[0].querySelector('.xxxClass'));


            var options = {
                size: 125,
                percent: circle.percent || 50,
                timer: circle.timer || 100,
                max: circle.timer || 100,
                lineColor: circle.lineColor || "red",
                timerColor: circle.timerColor || "green",
                lineWidth: 3,
                rotate: 0
            };

            var canvas = angular.element('<canvas></canvas>');
            var span = angular.element('<span></span>');

            if (typeof(G_vmlCanvasManager) !== 'undefined') {
                G_vmlCanvasManager.initElement(canvas);
            }

            circle.appendTo(span);
            circle.appendTo(canvas);

            var ctx = element[0].getContext('2d');
            canvas.width = canvas.height = options.size;


            var circleMargin = 10;
            var radius = (options.size - options.lineWidth - circleMargin) / 2;
            var to_rad = Math.PI / 180;
            var drawCircle = function(color, lineWidth, percent) {
                ctx.save();
                ctx.translate(options.size / 2, options.size / 2);
                ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
                percent = Math.min(Math.max(0, percent || 1), 1);
                ctx.beginPath();
                ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
                ctx.strokeStyle = color;
                ctx.lineCap = 'round';
                ctx.lineWidth = lineWidth;
                ctx.stroke();
                ctx.restore();
            };

            function drawArrow(color, percent) {
                percent = Math.min(Math.max(0, percent || 1), 1);
                if (percent == 1) return;
                ctx.save();
                ctx.fillStyle = color;
                ctx.translate(options.size / 2, options.size / 2);
                ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
                ctx.beginPath();
                ctx.rotate(Math.PI * 2 * percent);

                var arrowWidth = 10;
                var arrowHeight = 8;

                ctx.moveTo(radius - (arrowWidth / 2), 0);
                ctx.lineTo(radius + (arrowWidth / 2), 0);
                ctx.lineTo(radius, arrowHeight);
                ctx.lineTo(radius - (arrowWidth / 2), 0);
                ctx.fill();
                ctx.restore();
            }

            function drawTicks(color, seconds) {
                var to_rad = Math.PI / 180;
                ctx.save();
                ctx.translate(options.size / 2, options.size / 2);
                ctx.rotate(-90 * to_rad);
                ctx.lineWidth = 1;
                ctx.strokeStyle = color;

                var angle = 360 / 60;
                var tickSize = 14;
                var tickMargin = 8;

                var stepTime = angle*seconds/options.max*10;
                for (var i = 0; i <= stepTime; i++) {
                    ctx.save();
                    ctx.rotate((360-(i * angle)) * to_rad);
                    ctx.beginPath();
                    ctx.moveTo(radius - tickSize - tickMargin, 0);
                    ctx.lineTo(radius - tickMargin, 0);
                    ctx.stroke();
                    ctx.restore();
                }
                ctx.restore();
            }

            function render() {
                ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
                --options.timer;
                if(options.timer < 0 ){options.timer = options.max}
                var seconds = options.timer;
                var size = -(options.timer - ((options.max / options.timer) * seconds)) ;

                drawCircle(options.lineColor, options.lineWidth, options.percent / 100);
                drawArrow(options.lineColor, options.percent / 100);
                drawTicks(options.timerColor, size);
                span.innerHTML = "<b>" + seconds + "</b>" + "<br/>" + "seconds";
                setTimeout(render, 1000);
            }
            render();
        };

        return {
            restrict: "E",
            scope: {
                percent: "@",
                timer: "=timer",
                lineColor: "@",
                timerColor: "@"
            },
            link: linked,
            template:
            '<div class="xxxClass" percent="percent" timer="timer" lineColor="lineColor" timerColor="timerColor"></div>'
        };
    });

div {
  position: relative;
  margin: 80px;
  width: 220px;
  height: 220px;
}
canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
span {
    color: #555;
    display: block;
    line-height: 16px;
    padding-top: 90px;
    text-align: center;
    width: 220px;
    font-family: sans-serif;
    font-size: 25px;
    font-weight: 100;
    margin-left: 5px;
}
input {
  width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<div ng-app="xxx">
    <div ng-controller="xxxCtrl">
        <xxx-item percent="80" timer="100" lineColor="red" data-timerColor="green"></xxx-item>
        <xxx-item percent="50" timer="50" lineColor="blue" data-timerColor="red"></xxx-item>
    </div>
</div>

解决方案

You just a bit confused where should be element, and where should be canvas.

So, first, circle in your code refers to element with xxxClass css class, and in your code this: 

<div class="xxxClass" percent="percent" timer="timer" lineColor="lineColor" timerColor="timerColor"></div>

so, you you have jqLite element circle, but jqLite, does not have appendTo method, so it seems you mean append

Next, element - this jqLite element, where applied directive, so you your case it

<xxx-item percent="80" timer="100" lineColor="red" data-timerColor="green"></xxx-item>

and 

<xxx-item percent="50" timer="50" lineColor="blue" data-timerColor="red"></xxx-item>

so, this not a canvas and also does not have .getContext function.

so, you just need a bit change your code, and you can get something like this:

var app = angular.module('xxx', []);
app.controller('xxxCtrl', function() {});
app.directive('xxxItem', function() {
  var linked = function(scope, element) {
    var circle = angular.element(element[0].querySelector('.xxxClass'));

    console.log(circle, element[0]);

    var options = {
      size: 125,
      percent: scope.percent || 50,
      timer: scope.timer || 100,
      max: scope.timer || 100,
      lineColor: scope.lineColor || "red",
      timerColor: scope.timerColor || "green",
      lineWidth: 3,
      rotate: 0
    };

    var canvas = angular.element('<canvas></canvas>');
    var span = angular.element('<span></span>');

    if (typeof(G_vmlCanvasManager) !== 'undefined') {
      G_vmlCanvasManager.initElement(canvas);
    }

    circle.append(span);
    circle.append(canvas);

    var ctx = canvas[0].getContext('2d');
    canvas[0].width = canvas[0].height = options.size;


    var circleMargin = 10;
    var radius = (options.size - options.lineWidth - circleMargin) / 2;
    var to_rad = Math.PI / 180;
    var drawCircle = function(color, lineWidth, percent) {
      ctx.save();
      ctx.translate(options.size / 2, options.size / 2);
      ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
      percent = Math.min(Math.max(0, percent || 1), 1);
      ctx.beginPath();
      ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
      ctx.strokeStyle = color;
      ctx.lineCap = 'round';
      ctx.lineWidth = lineWidth;
      ctx.stroke();
      ctx.restore();
    };

    function drawArrow(color, percent) {
      percent = Math.min(Math.max(0, percent || 1), 1);
      if (percent == 1) return;
      ctx.save();
      ctx.fillStyle = color;
      ctx.translate(options.size / 2, options.size / 2);
      ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
      ctx.beginPath();
      ctx.rotate(Math.PI * 2 * percent);

      var arrowWidth = 10;
      var arrowHeight = 8;

      ctx.moveTo(radius - (arrowWidth / 2), 0);
      ctx.lineTo(radius + (arrowWidth / 2), 0);
      ctx.lineTo(radius, arrowHeight);
      ctx.lineTo(radius - (arrowWidth / 2), 0);
      ctx.fill();
      ctx.restore();
    }

    function drawTicks(color, seconds) {
      var to_rad = Math.PI / 180;
      ctx.save();
      ctx.translate(options.size / 2, options.size / 2);
      ctx.rotate(-90 * to_rad);
      ctx.lineWidth = 1;
      ctx.strokeStyle = color;

      var angle = 360 / 60;
      var tickSize = 14;
      var tickMargin = 8;

      var stepTime = angle * seconds / options.max * 10;
      for (var i = 0; i <= stepTime; i++) {
        ctx.save();
        ctx.rotate((360 - (i * angle)) * to_rad);
        ctx.beginPath();
        ctx.moveTo(radius - tickSize - tickMargin, 0);
        ctx.lineTo(radius - tickMargin, 0);
        ctx.stroke();
        ctx.restore();
      }
      ctx.restore();
    }

    function render() {
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      --options.timer;
      if (options.timer < 0) {
        options.timer = options.max
      }
      var seconds = options.timer;
      var size = -(options.timer - ((options.max / options.timer) * seconds));

      drawCircle(options.lineColor, options.lineWidth, options.percent / 100);
      drawArrow(options.lineColor, options.percent / 100);
      drawTicks(options.timerColor, size);
      span.html("<b>" + seconds + "</b>" + "<br/>" + "seconds");
      setTimeout(render, 1000);
    }
    render();
  };

  return {
    restrict: "E",
    scope: {
      percent: "@",
      timer: "=timer",
      lineColor: "@",
      timerColor: "@"
    },
    link: linked,
    template: '<div class="xxxClass" percent="percent" timer="timer" lineColor="lineColor" timerColor="timerColor"></div>'
  };
});

/* Styles go here */

canvas {
  display: block;
  position: relative;
  top: 0;
  left: 0;
}
span {
  color: #555;
  display: block;
  line-height: 12px;
  padding-top: 42px;
  text-align: center;
  width: 108px;
  font-family: sans-serif;
  font-size: 10px;
  text-transform: uppercase;
}
span b {
  font-size: 17px;
}

<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app="xxx">
  <div ng-controller="xxxCtrl">
    <xxx-item percent="80" timer="100" linecolor="red" data-timercolor="green"></xxx-item>
    <xxx-item percent="50" timer="50" linecolor="blue" data-timercolor="red"></xxx-item>
  </div>
</div>

这篇关于如何在以角指令转换帆布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆