Klar, ganze, verwandelt das HTML5 Canvas-Element, während die Erhaltung Kontext transformieren

Möchte ich die zoom-und pan eine HTML5-Canvas-verwandelt den Kontext translate() und scale() -, clearing die Leinwand, und dann Neuzeichnen. Beachten Sie, dass ich explizit nicht aufrufen save() und restore() um meine Transformationen.

Wenn ich führen Sie die standard - ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height) dann das gesamte sichtbare Leinwand, nicht gelöscht werden; downscaling oder schwenken kann dazu führen, diese erste Rechteck nicht genau decken im Bereich der Zeichnung.

Wenn ich die Webkit-freundliche clearing-Methode...

var w=canvas.width;
canvas.width = 0;
canvas.width = w;

...dann die kumulative transformation der Kontext zurückgesetzt.

Wie kann ich am besten klar, dass das gesamte canvas-Kontext ohne Verlust meiner transformation?

Die Sauger-ish Weg wäre, um speichern Sie die Skalen und übersetzt und dann die Berechnung der bounding-Rechteck selbst ist, aber man würde hoffen, dass es einen besseren Weg gibt.
Das ist eigentlich das, was ich Tue, da bin ich schon mit der Aufzeichnung der Transformation und Hinzugefügt haben, die Methode zur Transformation von Platz auf dem Bildschirm, um den canvas-Bereich, aber dies schien wie eine gute Gelegenheit, an die Probleme mit diesen beiden clearing-Methoden und sehen, ob es etwas sauberer.

InformationsquelleAutor Phrogz | 2011-04-02

  1. 22

    Halten Spur von alle der transformation von Informationen, wie Sie vermutlich tun wird, was mehrere andere bisher getan haben, (wie cake.js und meine eigene Bibliothek, die für zwei). Ich denke, dadurch wird so ziemlich eine Notwendigkeit für irgendeine große Leinwand-Bibliothek.

    Ilmari der cake.js auch beschwerte sich bei mozilla:
    https://bugzilla.mozilla.org/show_bug.cgi?id=408804

    Könnten Sie stattdessen anrufen speichern/wiederherstellen, um Ihre clear-Methode:

    //I have lots of transforms right now
ctx.save();
ctx.setTransform(1,0,0,1,0,0);
//Will always clear the right space
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.restore();
//Still have my old transforms

    Nicht erfüllen Ihrem Fall?

    Wie dumm von mir; ich war versucht zu denken, wie man die Identität matrix, aber dachte, dass die aktuelle Transformation zu berechnen, die inverse und multiplizieren Sie mit, dass. Ja, das sollte gut tun.
    Froh, dass ich helfen konnte. Ich wollte auch sagen, danke für all Ihre Beiträge für das canvas-Thema auf S. O.

    InformationsquelleAutor Simon Sarris

  2. 3

    Für diejenigen die es interessiert, verfolgen Sie Ihre vollständigen Kontext transformiert, hier ist mein code dafür in eine on-demand-pro-Rahmen-basis. Dieser vorangestellt ist, mit der Nutzung, die zeigt, wie klar die volle Rechteck, basierend auf der transformierten Koordinaten. Sie können sehen, der code in Verwendung auf meiner website.

    window.onload = function(){
  var canvas = document.getElementsByTagName('canvas')[0];
  var ctx = canvas.getContext('2d');
  trackTransforms(ctx);
  function redraw(){
    var p1 = ctx.transformedPoint(0,0);
    var p2 = ctx.transformedPoint(canvas.width,canvas.height);
    ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);
    //... 
  }
}


//Adds ctx.getTransform(), returning an SVGMatrix
//Adds ctx.transformedPoint(x,y), returning an SVGPoint
function trackTransforms(ctx){
  var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
  var xform = svg.createSVGMatrix();
  ctx.getTransform = function(){ return xform; };

  var savedTransforms = [];
  var save = ctx.save;
  ctx.save = function(){
    savedTransforms.push(xform.translate(0,0));
    return save.call(ctx);
  };
  var restore = ctx.restore;
  ctx.restore = function(){
    xform = savedTransforms.pop();
    return restore.call(ctx);
  };

  var scale = ctx.scale;
  ctx.scale = function(sx,sy){
    xform = xform.scaleNonUniform(sx,sy);
    return scale.call(ctx,sx,sy);
  };
  var rotate = ctx.rotate;
  ctx.rotate = function(radians){
    xform = xform.rotate(radians*180/Math.PI);
    return rotate.call(ctx,radians);
  };
  var translate = ctx.translate;
  ctx.translate = function(dx,dy){
    xform = xform.translate(dx,dy);
    return translate.call(ctx,dx,dy);
  };
  var transform = ctx.transform;
  ctx.transform = function(a,b,c,d,e,f){
    var m2 = svg.createSVGMatrix();
    m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
    xform = xform.multiply(m2);
    return transform.call(ctx,a,b,c,d,e,f);
  };
  var setTransform = ctx.setTransform;
  ctx.setTransform = function(a,b,c,d,e,f){
    xform.a = a;
    xform.b = b;
    xform.c = c;
    xform.d = d;
    xform.e = e;
    xform.f = f;
    return setTransform.call(ctx,a,b,c,d,e,f);
  };
  var pt  = svg.createSVGPoint();
  ctx.transformedPoint = function(x,y){
    pt.x=x; pt.y=y;
    return pt.matrixTransform(xform.inverse());
  }
}
    Dieses Beispiel ist Super und hat mir sehr geholfen, aber es gibt noch ein problem, das ich nicht bekommen kann meinen Kopf herum: Wie würden Sie deaktivieren Sie die Leinwand in redraw(), wenn das Bild gedreht wird an verschiedenen Punkten des Bildes?
    Genau wie die akzeptierte Antwort zeigt: speichern Sie den Kontext transformieren, setzen Sie die Transformation auf die Einheitsmatrix, klar die 0,0,Breite,Höhe und wiederherstellen der Transformation.
    Ja, Sie haben Recht, ich habe nur falsch so etwas "wiederherstellen" würde nicht so funktionieren wie Sie sollen und transformedPoint kehrte der falschen Stelle nach einem restore. vielen Dank so weit.

    InformationsquelleAutor Phrogz

Schreibe einen Kommentar