javascript - img - kinetic v4 3.2 min js
Usando KineticJs para actualizar y reescalar un dibujo (0)
Tengo un problema al intentar actualizar un dibujo que usa varios objetos de dibujo diferentes. El dibujo es similar a un dibujo de AutoCad y se mide en mm, por lo que la escala ya se está calculando para que el dibujo encaje en el escenario. Cuando esto se calcula, la escala se establece en uno.
Tengo los objetos de dibujo (líneas, círculos, arcos, etc.) almacenados en una matriz. Estoy tratando de actualizar el dibujo y reescalarlo sin borrar el escenario y hacer un rediseño completo para mejorar el rendimiento.
Lo que intento hacer es aumentar la longitud del dibujo. El dibujo tiene un punto de corte para que los objetos a la derecha del punto de corte se muevan en el valor de incremento y cualquier línea que abarque el punto de corte aumentará en longitud. Este cambio requerirá una actualización de la escala calculada inicialmente para que el dibujo aparezca en el escenario.
Hay 2 violines que he configurado para demostrar el problema. El primero ( http://jsfiddle.net/tctruckscience/3HxuP/4/ ) muestra lo que estoy haciendo actualmente. El problema es que el dibujo se escalará, pero comenzará a alejarse del lado derecho de la pantalla.
originalRectWidth = 2600;
rectWidth = rectWidth + 20;
scaleValue = originalRectWidth / rectWidth;
oldRectWidth = rect.getWidth();
newPixelsPerScaleUnit = 260 / rectWidth;
newRectScaled = rectWidth * newPixelsPerScaleUnit;
drawingGroup.setWidth(newRectScaled);
rect.setWidth(newRectScaled);
drawingGroup.scaleBy(scaleValue);
Además, si hago muchos incrementos y luego hago una gran disminución usando un cuadro de texto, hay un problema en el redibujado. Es que las líneas no se disminuyen correctamente. Creo que es un problema con la escala. Cuando cambio el tamaño de la página, que llama a una actualización de los objetos de dibujo de la matriz en la que se encuentran, las proporciones del dibujo son correctas
El segundo Fiddle ( http://jsfiddle.net/tctruckscience/rsEyA/15 ) muestra cómo me gustaría que se comporte el dibujo.
oldWidth = drawingGroup.getWidth();
newWidth = drawingGroup.getWidth() + 20;
scaleValue = originalWidth / newWidth;
¿Hay alguna forma de hacer esto?