html5 canvas verhindern linienbreite skalierung

Wenn ich ein Rechteck von sagen linienbreite = 2 und dann skalieren, um die Größe des Rechtecks zu verdoppeln, bekomme ich ein Rechteck, das seine Grenze doppelt so groß wie die ursprüngliche Linienbreite hat.html5 canvas verhindern linienbreite skalierung

Gibt es eine Möglichkeit, die Linienbreite auf die wahrgenommene Größe von 2 oder die Originalgröße zu halten.

Kurz gesagt, möchte ich nur die Größe des Rechtecks skalieren aber halten die Linienbreite visuell von Größe 2.

ich vor der Linienbreite versuchte Einstellung und nach der Skala (2,2) Befehl, aber die Rahmenbreite steigt auch.

Eine Option besteht darin, die Linienbreite durch den Skalierungsfaktor zu teilen. Dies funktioniert, wenn die x- und y-Skalierungsfaktoren gleich sind.

Ich habe nicht die Option, die Breite und Höhe des Rechtecks zu skalieren, und ich muss den Befehl skalieren verwenden, da ich andere Objekte innerhalb des Rechtecks habe, die die Skalierung benötigen.

Quelle

2010-09-25 Nilesh

Ok, Sie haben ein paar Optionen:

Sie können Ihre eigene Skalierung von Koordinaten und Dimensionen tun, zum Beispiel

ctx.strokeRect(scaleX * x, scaleY * y, scaleX * width, scaleY * height) ;

Und Sie müssen die Skalierung auch auf alle anderen Objekte anwenden.

Alternativ können Sie die Skalierung anwenden, aber nicht auf lineWidth verlassen, um den Rand des Rechtecks zu zeichnen. Eine einfache Methode wäre, um das Rechteck zu zeichnen, indem die richtige Region füllte und dann das Innere entfernen, minus der Grenze, etwa so:

var scaleX = 1.5, scaleY = 2; 
var lineWidth = 2; 

ctx.scale(scaleX, scaleY); 

ctx.fillStyle = "#000"; 
ctx.fillRect(100, 50, 100, 
ctx.clearRect(100+lineWidth/scaleX, 50+lineWidth/scaleY, 100-(2*lineWidth)/scaleX, 60-(2*lineWidth)/scaleY);

Quelle

2010-09-26 13:19:10 andrewmu

Die OP scheint genau das Gegenteil zu erleben ... die 'lineWidth' durch Skalierung betroffen _is_ werden? – MrWhite

Gute Trauer! Das war ein ziemlich schlechtes Leseverstehen von mir! Und für mich selbst testen, ja es ist betroffen. – andrewmu

Ich habe meine Antwort geändert - danke, dass du auf meinen Fehler hingewiesen hast. – andrewmu

Die Linienbreite sollte vorher verkleinert werden.

ctx.lineWidth = 2/Math.max(scaleX, scaleY); 
ctx.scale(scaleX, scaleY); 
ctx.fillRect(50, 50, 50, 50);

Quelle

2012-06-02 16:01:30 naka

aber dies verhindert nicht die Linienbreite Skalierung, nur gewährleistet, dass die Linienbreite einen Wert nicht überschreitet. – Calmarius

Sie können Pfad mit Transformation definieren und ohne es streichen. Auf diese Weise wird die Linienbreite nicht transformiert.

Beispiel:

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.save(); //save context without transformation 
ctx.scale(2,0.5); //make transformation 
ctx.beginPath(); //define path 
ctx.arc(100,75,50,0,2*Math.PI); 
ctx.restore(); //restore context without transformation 
ctx.stroke(); //stroke path 
</script> 

</body> 
</html>

Quelle

2014-08-22 13:00:05

Mit welchen Browsern haben Sie es getestet? auf Chrome 38 scheint es nicht zu funktionieren. – b0fh

Super! Funktioniert für mich in Chrome 44, FF 39, IE 9+ –

Das funktioniert super. Wenn jedoch vor der Wiederherstellung ein clip() - Bereich vorhanden ist, geht dieser verloren, und wenn der Clip-Bereich vor dem Strich hinzugefügt wird, wird der Clip-Pfad gestri- chen. Gibt es eine andere Lösung? – PeterT

html5 canvas verhindern linienbreite skalierung

Antwort

Verwandte Themen