AngularJS schreiben auf ein Bild mit Leinwand

Habe ich ein Bild in meine html dass ich mit einer id:

<img id={{idImage}} ng-src="http://localhost:3000/images/{{idImage}}"/>

Habe ich in meinem Bereich einige Koordinate (x, y, w, h).

In meinem controller: 

$scope.coordinate;

Aber ich weiß nicht, wie zu zeichnen mit canvas-Bereich auf das Bild nach den Koordinaten.

Vielen Dank für Ihre Hilfe!

  • könnte Sie verwenden .svg ? haben Sie versucht, alles so weit ? Sind Sie offen, um mit anderen Bibliotheken wie d3 ?
  • Ich habe eine .html (da habe ich andere info, um die Anzeige auf der Seite). Ich würde lieber mit Leinwand, aber nicht wissen, libs d3.
  • Haben Sie versucht, zu lernen, wie die Leinwand vor dem posten dieser Frage? Wenn Sie: haben Sie eine konkrete Frage über, wie zu zeichnen in canvas? Wenn Sie es noch nicht: bitte löschen Sie die Frage und Fragen Sie wieder, nachdem Sie versucht haben, etwas.
InformationsquelleAutor Carlos | 2014-10-24
  1. 4

    Etwas wie das folgende einfache Beispiel.

    var drawingCanvas = document.getElementById($scope.idImage);
var context = drawingCanvas.getContext('2d');

$scrope.draw = function() {
context.drawImage($scope.idImage, $scope.coordinate.x, $scope.coordinate.y, $scope.coordinate.w, $scope.coordinate.h);
}

    JS Fiddle-Beispiel #1
    JS Fiddle Beispiel #2

    Es ist nichts besonderes über das zeichnen im canvas-Bereich, gerade weil Sie mit angular.

    Einige ausgezeichnete Beispiele hier : HTML5-Canvas zeichnen

    • Die zweite JSFiddle Beispiel ist nicht im Winkel Weg.
    InformationsquelleAutor Pogrindis
Schreibe einen Kommentar