javascript - full - paper js rectangle example
Paper.js no cambiará el tamaño del lienzo correctamente (3)
Estoy probando Paper.js por diversión, pero parece que ya estoy atascado desde el principio.
Añadir resize="true" a la etiqueta del canvas se supone que hace que el elemento sea tan alto y ancho como la ventana del navegador. Sin embargo, hacer eso resulta en un comportamiento bastante extraño.
Esperaba que el lienzo se ajustara a la ventana gráfica justo después de cargar la página, pero no lo hizo, por lo que inicialmente pensé que no tenía ningún tamaño. Sin embargo, lo que realmente sucede es aún más extraño: el lienzo comienza con su tamaño predeterminado de 300x150, y cuando cambio el tamaño de la ventana gráfica, crece lentamente pero de forma indefinida .
Para el registro, he intentado usar data-paper-resize="true" o simplemente resize lugar, o usar Chrome en lugar de Firefox, todo en vano.
No estoy esperando una respuesta si este problema es causado por alguna configuración inexplicablemente extraña en mi extremo. Me pregunto, sin embargo, si el problema es común (o incluso se sabe que existe) y tiene causas y soluciones conocidas.
Aquí está el código que estoy usando:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="paper-full.min.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var path = new Path();
path.strokeColor = ''black'';
path.moveTo(new Point(120, 120));
path.lineTo(new Point(500, 500));
</script>
</head>
<body>
<canvas id="myCanvas" style="border: 1px dotted red;" resize="true"></canvas>
</body>
</html>
Abrí un problema para esto en Github y parece que se trata de un error introducido en 0.9.22. @Skalkaz me señaló esta pregunta.
Aquí está el tema pendiente: https://github.com/paperjs/paper.js/issues/662 .
También puede bajar a 0.9.21 mientras espera un parche.
Agrega el siguiente CSS a tu proyecto:
<style type="text/css">
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
/* Scale canvas with resize attribute to full size */
canvas[resize] {
width: 100%;
height: 100%;
}
</style>
Otra opción es, si está utilizando las proporciones establecidas (relativas al cuerpo), para anular la vista del papel:
var pageWidth = document.getElementsByTagName("BODY")[0].clientWidth
var pageHeight = document.getElementsByTagName("BODY")[0].clientHeight
view.size.width = pageWidth * myWidthScale
view.size.height = pageHeight * myHeightScale
center = new Point(width / 2, pageHeight / 2)
view.center = center