是否已经有了AngularJS的画布绘图指令

发布网友发布时间：2022-05-02 02:45

共3个回答

懂视网时间：2022-05-14 05:52

这篇文章主要介绍了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">
 <!--
 界面的这个元素会被替换成canvas元素;
 -->
 <p ang:round:progress data-round-progress-model="roundProgressData"></p>
 <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>

热心网友时间：2022-05-14 03:00

我们经常会在ng-click事件传入$event参数，这样在js中我们就可以捕捉到该事件，获得该事件的一些属性和方法(例如获得触发事件的元素$event.target等)。
示例如下：
Html：

image.png
Js：

image.png
效果：

image.png

image.png
但是需要注意的是当你使用ng-change指令时是无法传入该参数的：

image.png
经网上查找原因是：

image.png
简单说就是ng-change并不是一个处理更改事件的指令。因此一般当我们需要用到$event时，需要注意不能使用ng-change。如果可以的话还是用ng-click。
如果只能使用ng-change的话，一个简单的方法是先用ng-click获得$event参数，再传给ng-change，例如：
Html

image.png
Js:

image.png
这样捕捉到的事件可以定位该元素。
或者可以使用jQuery#on() 或者 jqLite#on()绑定事件监听来实现，然而我并不会。。。
第二组：叶佳意 JS重绘图片
在需要上传图片到后台时，图片过大会导致上传失败。此时需要将图片等比例缩小，具体方法如下：
首先，使用createElement() 方法，通过指定名称创建一个元素。此时我们需要一个canvas 元素。canvas 元素本身是没有绘图能力，需使用 JavaScript 在网页上绘制图像。因此，需要使用getContext() 方法返回一个用于在画布上绘图的环境。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。在计算完缩放比例后，使用drawImage() 方法在画布上绘制图像。drawImage() 方法能够绘制图像的某些部分，或增加或减少图像的尺寸。使用context.drawImage(img,x,y,width,height); 在画布上定位图像，并规定图像的宽度和高度。
代码如下：
var cvs = document.createElement('canvas');var scale = 1;if (this.width > 800 || this.height > 800) { //可以根据具体的要求去设定
if (this.width > this.height) {
scale = 800 / this.width;
} else {
scale = 800 / this.height;
}
}
cvs.width = this.width * scale;
cvs.height = this.height * scale;//计算等比缩小后图片宽高var ctx = cvs.getContext('2d');
ctx.drawImage(this, 0, 0, cvs.width, cvs.height);

热心网友时间：2022-05-14 04:18

是有了，兄弟