zum Erstellen von HTML-Canvas-Elemente mit AngularJS

Ich möchte einige Kreise in einem HTML-Canvas mit angularJS erstellen. Ich weiß, wie man dasselbe mit Javascript tut, aber ich bin neu bei angularJS und jede Hilfe wird sehr geschätzt.zum Erstellen von HTML-Canvas-Elemente mit AngularJS

Code:

<title>Home Page</title> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script> 



</head> 

<body> 

<div ng-app="myapp" ng-controller="myctrl"> 
<canvas id="canvas" width="2100" height="900" 
    style="border: 1px solid #d3d3d3;"> 
</canvas> 
</div> 
<script> 

var $scope; 
var app = angular.module('myapp', []); 
myapp.controller("myctrl", function($scope){ 
var c1 = document.getElementById("canvas"); 
var ctx = c1.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(500, 500, 50, 0, 2 * Math.PI, false); 
ctx.lineWidth = 0.2; 
ctx.stroke(); 
ctx.fill(); 
}) 

</script> 
</body>

Quelle

2016-05-13 swati jain

hallo bitte Schlag Verbindung überprüfen: https://github.com/ActivKonnect/angular-circles auch http://htmlpreview.github.io/?https://github.com/ActivKonnect/angular-circles/ Blob/Master/Beispiel/Index.html –

Vielen Dank für Ihre Hilfe .. aber ich fragte mich, ob es eine Möglichkeit gibt, mit meinem Code zu arbeiten. –

Eigentlich Ihr Code funktioniert. Das Hauptproblem ist, dass Sie versucht haben, auf Ihre eckige App mit der falschen Variablen zuzugreifen (myapp statt app). Hier ist eine jsbin, die Ihren Code ausführt.

Aber Ändern der DOM in einer Steuerung ist bad practice. Verwenden Sie eine directive, um auf die DOM-Objekte zuzugreifen.

Ich habe eine einfache example mit einer Direktive erstellt.

app.directive('drawCircle', function() { 
return { 
    scope: { 
    x: '@x', 
    y: '@y' 
    }, 
    link: function(scope, element, attrs) { 
    var x = parseInt(scope.x); 
    var y = parseInt(scope.y); 
    var canvas = element.parent(); 
    var ctx = canvas[0].getContext("2d"); 
    ctx.beginPath(); 
    ctx.arc(x, y, 50, 0, 2 * Math.PI, false); 
    ctx.lineWidth = 0.2; 
    ctx.stroke(); 
    ctx.fill(); 
    } 
} 
});

Die Richtlinie hat zwei Parameter die Position des Kreises in einer Leinwand zu setzen:

<canvas id="canvas" width="2100" height="900" style="border: 1px solid #d3d3d3;"> 
    <draw-circle x="500" y="500"></draw-circle> 
    <draw-circle x="200" y="500"></draw-circle> 
</canvas>

Diese beiden Kreise innerhalb der Leinwand ziehen wird. Hoffe, das hilft.

Quelle

2016-05-13 09:14:37 k4l4m

vielen Dank ... wirklich zu schätzen .. :) –

Sie vergessen '' drawCircle' in '

zum Erstellen von HTML-Canvas-Elemente mit AngularJS

Antwort

Verwandte Themen