Drehen eines Bildes Objekt vor auf Leinwand Zeichnung - HTML

Ich habe ein Image-Objekt wie folgt:Drehen eines Bildes Objekt vor auf Leinwand Zeichnung - HTML

imgObj = new Image(); 
imgObj.src = "http://localhost/images/img1.png"; 
imgObj.onload = function() {}

und ich möchte auf eine Leinwand um dieses Bild zu zeichnen, wenn auf eine Schaltfläche geklickt. Bei jedem Klicken zeichnet das Bild darauf, aber ich möchte das Objekt vor dem Zeichnen drehen, weil ich nicht möchte, dass das Ergebnis umfällt und ich es anders sehen muss.

Ich benutze Javascript und jQuery in meinem Projekt. Gibt es dafür eine Lösung?

Quelle

2017-12-19 Behnam Azimi

Wenn Sie das Bild drehen (indem Sie eine separate Leinwand erstellen und darauf drehen), wird die Bildqualität beeinträchtigt. Sie können das Original am besten mit der Canvas-Transformation in die Leinwand rendern. Dadurch erhalten Sie bei jeder Rendering-Funktion die beste Qualität. – Blindman67

@ Blindman67, verwende ich Clip in meiner Leinwand und wenn ich den Kontext drehen, unter Clip ausblenden. Stellen Sie sich vor, dass ich die Leinwand im Kreis geschnitten habe und wenn ich sie rotiere, wird der Inhalt unter die beschnittene Ebene verschoben. –

Sie müssen den betroffenen Code anzeigen. Es gibt keinen Grund, ein Bild vorher zu drehen, es sei denn, Sie speichern es gedreht. – Blindman67

sollte diese Arbeit:

imgObj.style.transform = "rotate(90deg)"

Es setzt die transform CSS Stil-Eigenschaft auf dem Bildobjekt.

Quelle

2017-12-19 20:47:11

Es hat nicht funktioniert. Das Bild wird nicht im Dokument angezeigt. Es ist ein abstraktes Objekt. –

Dies kann Ihnen helfen: https://Stackoverflow.com/a/6011402/1861779 @BehnamAzimi –

FYI Meine Lösung funktioniert für DOM, aber möglicherweise nicht für Canvas –

Sie können context.rotate verwenden, um die Zeichenfläche zu drehen und dann das Bild normal auf der Zeichenfläche zu zeichnen. Das Bild wird gedreht angezeigt. Verwenden Sie dann restore, wenn Sie mehr ohne die Drehung zeichnen möchten.

context.rotate(45 * Math.PI/180); 
context.drawImage(img, 0, 0); 
context.restore()

Quelle

2017-12-19 20:47:16 maxpaj

Ich muss das Objekt nicht Kontext drehen. weil ich es in einigen Fällen rendere und ich die vorherigen Zeichnungsoptionen benötige. –

@BehnamAzimi dann einfach erneut drehen, wenn Sie neu zeichnen möchten. – Kaiido

Drehen eines Bildes Objekt vor auf Leinwand Zeichnung - HTML

Antwort

Verwandte Themen