angularJS結合canvas畫圖範例_AngularJS-js教程-PHP中文網

首頁

web前端

js教程

angularJS結合canvas畫圖範例_AngularJS

May 16, 2016 pm 04:15 PM

angularjs canvas

這裡跟大家分享一個angularJS結合canvas畫圖範例,效果非常不錯，讚一個先。

複製程式碼程式碼如下:

<!DOCTYPE html>
<html ng-app="APP">
<head>
 <meta charset="UTF-8">
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script>
</head>
<body ng-controller="MainCtrl">

 <div ang:round:progress data-round-progress-model="roundProgressData"></div>



 <script> 地 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, 寬度, 高度); // 「背景」圓 var x = 寬度 / 2; var y = 高度 / 2; ctx.beginPath(); ctx.arc(x, y, parseInt(outerCircleRadius), 0, Math.PI * 2, false); ctx.lineWidth = parseInt(outerCircleWidth); ctx.筆畫樣式 = 外圓背景色; ctx.中風(); // 內圓 ctx.beginPath(); ctx.arc(x, y, parseInt(innerCircleRadius), 0, Math.PI * 2, false); ctx.lineWidth = parseInt(innerCircleWidth); ctx.StrongStyle = innerCircleColor; ctx.中風(); // 內部數字 ctx.font = labelFont; ctx.textAlign = 'center'; ctx.textBaseline = '中'; ctx.fillStyle = labelColor; ctx.fillText(newValue.label, x, y); // 「前景」圓 var startAngle = - (Math.PI / 2); var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2); var 逆時針 = false; ctx.beginPath(); ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, 逆時針); ctx.lineWidth = parseInt(outerCircleWidth); ctx.筆畫樣式=outerCircleForegroundColor; ctx.中風(); }，正確）； }, post: 函數 postLink(範圍、instanceElement、instanceAttributes、控制器) {} }; } }; var roundProgress = { //編譯內先對dom操作，再對$socpe進行監聽; 編譯：編譯函數， 替換：true }; 返回回合進度； }]); </腳本> </身體> </script>

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn