0
171
VistasObtenga pivote cx / cy de la rotación SVGMatrix
Dado es un elemento SVG que tiene una transformación de rotación entre otros.
Las transformaciones se pueden iterar en JS, encontrando la transformación de rotación por su tipo SVGTransform.SVG_TRANSFORM_ROTATE . El ángulo se puede extraer usando SVGTransform.angle . Todo lo demás está codificado en SVGTransform.matrix .
¿Cómo reconstruir el desplazamiento del centro de rotación del objeto transformado?
console.clear(); let r = document.querySelector('svg rect'); let transforms = r.transform.baseVal; for(let i=0; i<transforms.length; i++) { let t=transforms[i]; if(t.type==SVGTransform.SVG_TRANSFORM_TRANSLATE) { console.log('Found translate '+t.matrix.e+', '+t.matrix.f); } else if(t.type==SVGTransform.SVG_TRANSFORM_ROTATE) { console.log('Found rotation'); console.log(' - angle is '+t.angle); //30 console.log(' - cx is '+'???'); //50 wanted console.log(' - cy is '+'???'); //25 wanted } } <svg width="300" height="200"> <rect style="fill: blue;" width="100" height="50" transform="translate(30 30) rotate(30 50 25)" /> </svg>1 Respuestas
Responde la pregunta0
Después de iniciar sesión t parece que no hay una forma sencilla de recuperar cx y cy.
Pero podemos calcularlo a partir de algunas ecuaciones. El centro de rotación es el único punto que se asigna a sí mismo bajo una rotación (si el ángulo no es cero o equivalente).
Si el centro está ubicado en x,y , debe satisfacer la siguiente ecuación que involucra la multiplicación de matrices:
Uno puede resolver las dos ecuaciones a*x+c*y+e=x y b*x+d*y+f=y . Después de algunos cálculos adicionales, es posible encontrar x e y:
console.clear(); let r = document.querySelector('svg rect'); let transforms = r.transform.baseVal; for(let i=0; i<transforms.length; i++) { let t=transforms[i]; if(t.type==SVGTransform.SVG_TRANSFORM_TRANSLATE) { console.log('Found translate '+t.matrix.e+', '+t.matrix.f); } else if(t.type==SVGTransform.SVG_TRANSFORM_ROTATE) { console.log('Found rotation'); let{a,b,c,d,e,f}= t.matrix ; let denominator = a - a*d + b*c+d-1 let x = ((d-1)*ec*f)/denominator let y = ((a-1)*fb*e)/denominator console.log(t, 'angle' in t ) console.log(' - angle is '+t.angle); //30 console.log(' - cx is '+ x); // 50.00000000000001 console.log(' - cy is '+ y); // 25.000000000000004 } } <svg width="300" height="200"> <rect style="fill: blue;" width="100" height="50" transform="translate(30 30) rotate(30 50 25)" /> </svg> Como puede ver, aunque los resultados son muy parecidos a los originales, no puede recuperar exactamente la entrada. Pero entonces probablemente no tenga más de 4 lugares decimales en la entrada, es posible que desee usar algo como +cx.toFixed(4) .
Además, si el ángulo es 0 u otros múltiplos de 360 grados, el centro no se puede recuperar, ya que tal rotación es solo matriz de identidad, cualquier centro da los mismos resultados. Dependiendo de su caso de uso, podría ser mejor guardar los datos sobre cx, cy, etc. en algún lugar y escribir en el rectángulo en función de eso, en lugar de obtener las transformaciones del rectángulo e intentar recuperarlas.