angularJS结合canvas画图例子

网络编程 2025/1/19 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

这里给大家分享一个angularJS结合canvas画图例子,效果非常不错，赞一个先。

复制代码代码如下:
<!DOCTYPE html>
<html ng-app="APP">
<head>
    <meta charset="UTF-8">
<script src="/UploadFiles/2021-04-02/angular.min.js"> </head>
<body ng-controller="MainCtrl">

    <div ang:round:progress data-round-progress-model="roundProgressData"></div>
    <br>
    <input type="number" ng-model="roundProgressData.label"/>
    <script>
                                   //引用angular.directives-round-progress这个模块;
     var APP = angular.module('APP', ['angular.directives-round-progress']).
     controller('MainCtrl', function($scope) {
        $scope.roundProgressData = {
          //这个是初始化的数据;
          label: 11,
          percentage: 0.11
        }
        //通过监听scope下的这个roundProgressData属性, 对界面的canvas进行重绘;
        $scope.$watch('roundProgressData', function (newValue) {
          newValue.percentage = newValue.label / 100;
        }, true);
      });
    </script>
<script>
    /*!
* AngularJS Round Progress Directive
*
* Copyright 2013 Stephane Begaudeau
* Released under the MIT license
*/
angular.module('angular.directives-round-progress', []).directive('angRoundProgress', [function () {
var compilationFunction = function (templateElement, templateAttributes, transclude) {
    if (templateElement.length === 1) {
      //初始化DOM模型, 包括初始化canvas等;
      var node = templateElement[0];
      var width = node.getAttribute('data-round-progress-width') || '400';
      var height = node.getAttribute('data-round-progress-height') || '400';
      var canvas = document.createElement('canvas');
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);
      canvas.setAttribute('data-round-progress-model', node.getAttribute('data-round-progress-model'));
        //相当于demo, 替换原来的元素;
      node.parentNode.replaceChild(canvas, node);
        //各种配置;
      var outerCircleWidth = node.getAttribute('data-round-progress-outer-circle-width') || '20';
      var innerCircleWidth = node.getAttribute('data-round-progress-inner-circle-width') || '5';
      var outerCircleBackgroundColor = node.getAttribute('data-round-progress-outer-circle-background-color') || '#505769';
      var outerCircleForegroundColor = node.getAttribute('data-round-progress-outer-circle-foreground-color') || '#12eeb9';
      var innerCircleColor = node.getAttribute('data-round-progress-inner-circle-color') || '#505769';
      var labelColor = node.getAttribute('data-round-progress-label-color') || '#12eeb9';
      var outerCircleRadius = node.getAttribute('data-round-progress-outer-circle-radius') || '100';
      var innerCircleRadius = node.getAttribute('data-round-progress-inner-circle-radius') || '70';
      var labelFont = node.getAttribute('data-round-progress-label-font') || '50pt Calibri';
      return {
        pre: function preLink(scope, instanceElement, instanceAttributes, controller) {
          var expression = canvas.getAttribute('data-round-progress-model');
            //监听模型, O了
            //就监听一个属性;
          scope.$watch(expression, function (newValue, oldValue) {
            // Create the content of the canvas
            //包括新建和重绘;
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, width, height);
            // The "background" circle
            var x = width / 2;
            var y = height / 2;
            ctx.beginPath();
            ctx.arc(x, y, parseInt(outerCircleRadius), 0, Math.PI * 2, false);
            ctx.lineWidth = parseInt(outerCircleWidth);
            ctx.strokeStyle = outerCircleBackgroundColor;
            ctx.stroke();
            // The inner circle
            ctx.beginPath();
            ctx.arc(x, y, parseInt(innerCircleRadius), 0, Math.PI * 2, false);
            ctx.lineWidth = parseInt(innerCircleWidth);
            ctx.strokeStyle = innerCircleColor;
            ctx.stroke();
            // The inner number
            ctx.font = labelFont;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = labelColor;
            ctx.fillText(newValue.label, x, y);
            // The "foreground" circle
            var startAngle = - (Math.PI / 2);
            var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2);
            var anticlockwise = false;
            ctx.beginPath();
            ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, anticlockwise);
            ctx.lineWidth = parseInt(outerCircleWidth);
            ctx.strokeStyle = outerCircleForegroundColor;
            ctx.stroke();
          }, true);
        },
        post: function postLink(scope, instanceElement, instanceAttributes, controller) {}
      };
    }
};
var roundProgress = {
      //compile里面先对dom进行操作, 再对$socpe进行监听;
    compile: compilationFunction,
    replace: true
};
return roundProgress;
}]);
</script>
</body>
</html>

以上就是angularJS结合canvas画图例子的全部代码了，希望大家能够喜欢。

angularJS,canvas

标签：

angularJS,canvas

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“angularJS结合canvas画图例子”

暂无angularJS结合canvas画图例子的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月19日

angularJS结合canvas画图例子

angularJS,canvas

jquery动态改变div宽度和高度

jquery实现上下左右滑动的方法

评论“angularJS结合canvas画图例子”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接