2010-09-25 20 views
15

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.

Respuesta

1

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

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

+0

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

+0

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

5

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

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

15

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> 
+0

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

+0

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

+0

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