canvas html5 previene escalado de ancho de línea

Si dibujo un rectángulo de decir linewidth = 2 y luego lo escalo al doble del tamaño del rectángulo, obtengo un rectángulo que tiene su borde el doble del tamaño del ancho de línea inicial.canvas html5 previene escalado de ancho de línea

Hay una manera de mantener el ancho de línea al tamaño percibido de 2 o el tamaño original.

En resumen, quiero simplemente escalar el tamaño del rectángulo pero mantener el ancho de línea visual del tamaño 2.

Intenté fijar la anchura de línea antes y después del comando escala (2,2), pero el ancho del borde también aumenta

Una opción es dividir el ancho de línea por el factor de escala y esto funcionará si los factores de escala xey son los mismos.

No tengo la opción de escalar el ancho y alto del rectángulo y necesito usar el comando de escala ya que tengo otros objetos dentro del rectángulo que necesitan la escala.

Fuente

2010-09-25 Nilesh

Ok, usted tiene un par de opciones:

Usted puede hacer su propia escala de las coordenadas y dimensiones, por ejemplo,

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

Y también deberá aplicar la escala a todos los otros objetos.

Alternativamente, puede aplicar la escala pero no confiar en lineWidth para dibujar el borde del rectángulo. Un método simple sería para dibujar el rectángulo rellenando la región correcta y luego retirar el interior, menos la frontera, así:

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);

Fuente

2010-09-26 13:19:10 andrewmu

El PO parece estar experimentando exactamente lo contrario ... el 'lineWidth' _es_ siendo afectada por la ampliación? – MrWhite

¡Buena pena! ¡Esa fue una comprensión bastante mala de mi lectura! Y probando por mí mismo, sí, está afectado. – andrewmu

He cambiado mi respuesta, gracias por señalar mi error. – andrewmu

ancho de línea se reducirá en escala de antemano.

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

Fuente

2012-06-02 16:01:30 naka

pero esto no evita el escalado del ancho de línea, solo garantiza que el ancho de línea no exceda un valor. – Calmarius

Puede definir la ruta con transformación y recorrerla sin una. De esa forma, el ancho de línea no se transformará.

Ejemplo:

<!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>

Fuente

2014-08-22 13:00:05

¿Con qué navegadores lo probaste? en Chrome 38 no parece funcionar. – b0fh

¡Impresionante! Funciona para mí en Chrome 44, FF 39, IE 9+ –

Esto funciona genial. Pero si hay una región de clip() antes de la restauración, se pierde y si la región del clip se agrega antes del trazo, se acaricia la ruta del clip. ¿Hay alguna otra solución? – PeterT

canvas html5 previene escalado de ancho de línea

Respuesta

Cuestiones relacionadas