How to execute Zoom extension with screen center in svg.
It's only a own idea taht's working for me. If you can improve it, please post.
Thanks.
<?xml version='1.0' encoding='UTF-8'?>
<svg version='1.1' id='project' xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink='http://www.w3.org/1999/xlink'
onload='init(evt)'>
<script type='text/ecmascript'>
/****************************
ONLY AT PROGRAM START.
/****************************/
function init(evt) {
gSvgDoc = evt.target.ownerDocument;
//Draw
gRootDraw = gSvgDoc.getElementsByTagName('g')[0];
//Get screen dimensions
getScreenDimensions();
//button and text declaration
cmdButton = document.getElementById('cmdButton');
textX=document.getElementById('textx');
textY=document.getElementById('texty');
//LISTENERS
textX.value="500";
textY.value="200";
cmdButton.addEventListener('click', zoomExtension);
gRootDocumento.addEventListener("focus", function( event ) {
event.target.style.background = "pink";
}, true);
gRootDocumento.addEventListener("blur", function( event ) {
event.target.style.background = "white";
var draw=document.getElementById('draw');
draw.setAttribute('width',textX.value);
draw.setAttribute('height',textY.value);
}
, true);
//On resizing browser window
window.addEventListener('resize', WindowResizeEvent);
// Agrega los manejadores de eventos wheel, dependiendo del navegador */
}
var cmdButton; //The try button;
var textX,textY; //Text to change initial rectangle dimensions
var scrWidth, scrHeight // The Screen dimensions
var gRootDocumento = document.documentElement; // The root node
var gSvgDoc; // The document
var gRootDraw; // El nodo raiz del dibujo
<![CDATA[
/**************************************************
On resizing browser window, get new dimensions.
***************************************************/
function WindowResizeEvent(evt) {
getScreenDimensions();
}
/******************************************************
Get screen dimensions.
*******************************************************/
function getScreenDimensions() {
scrWidth = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
scrHeight = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
//console.log('Pantalla: '+scrWidth+','+scrHeight);
}
/*******************************************************
Sets transformation matrix
********************************************************/
function setCTM(element, matrix) {
var s = 'matrix(' + matrix.a + ',' + matrix.b + ',' + matrix.c + ',' + matrix.d + ',' + matrix.e + ',' + matrix.f + ')';
element.setAttribute('transform', s);
}
function redraw() {
console.log("LOST")
}
/******************************************************
Apply zoom extension and center
*******************************************************/
function zoomExtension() {
//Screen dimensiones
var scrCenterCoords = gRootDocumento.createSVGPoint();
scrCenterCoords.x = scrWidth / 2;
scrCenterCoords.y = scrHeight / 2;
//ESCALADO
var scaleTo=1;
var kTransformation;
var currentDrawClientRect = gRootDraw.getBoundingClientRect() //Continously hanging bounding client rectangle.
//En primer lugar, tenemos que "meter" el dibujo en la pantalla. Esto significa que si el dibujo
//supera los límites de la pantalla, tendremos que escalarlo hasta que entre en la misma
//1. Ancho o alto se salen de los límites del dibujo
if ((currentDrawClientRect.width/(scrWidth)>=1) ||
(currentDrawClientRect.height>=scrHeight)) {
// Si el ancho del dibujo supera al de pantalla, lo encajo en el ancho de pantalla
if (currentDrawClientRect.width/scrWidth>=1) {
scaleTo=scaleTo*(scrWidth/currentDrawClientRect.width)
}
// Si el alto del dibujo supera al de pantalla, lo encajo en el alto de pantalla
if (currentDrawClientRect.height>=scrHeight) {
scaleTo=scaleTo*(scrHeight/currentDrawClientRect.height)
}
// Constantes de Zoom
kTransformation=gRootDraw.getCTM();
// Escribo nuevas constantes
kTransformation.a = kTransformation.a*scaleTo;
kTransformation.d = kTransformation.d*scaleTo;
// Aplico la transformación al CTM actual del dibujo.
setCTM(gRootDraw, kTransformation);
}
//En este momento, las dimensiones del dibujo ya son menores o iguales que las de la pantalla
//2. Se haya o no ejecutado el punto 1, los límites del dibujo estarán ya dentro de los
//del contenedor (pantalla). Esto quiere decir que si antes se salía de bounds, ya no
//se sale (se ha aplicado la transformación para ajustarlo), y si no se salía, ha quedado igual.
//Es el momento de hacer el "segundo zoom". Éste se realizará sobre la base de que el ancho o el alto
//actual del dibujo son menores que los del contenedor.
//Obtengo de nuevo "dónde está" el dibujo
currentDrawClientRect = gRootDraw.getBoundingClientRect();
// 2.1. Si la razón currentDrawClientRect.height / scrHeight es mayor que la razón
// currentDrawClientRect.width / (scrWidth-widthToolBox), escalamos la altura,
// si es menor, escalamos la anchura (ya siempre de ampliación)
if ((currentDrawClientRect.height / scrHeight)>=
(currentDrawClientRect.width / scrWidth))
scaleTo=scrHeight/currentDrawClientRect.height;
else
scaleTo=scrWidth/currentDrawClientRect.width;
// Constantes de Zoom
kTransformation=gRootDraw.getCTM();
// Escribo nuevas constantes
kTransformation.a = kTransformation.a*scaleTo;
kTransformation.d = kTransformation.d*scaleTo;
// Aplico la transformación al CTM actual del dibujo.
setCTM(gRootDraw, kTransformation);
//3. TRASLADOS AL ORIGEN (CONTANDO TOOLBOX)
//Obtengo de nuevo "dónde está" el dibujo
currentDrawClientRect = gRootDraw.getBoundingClientRect();
console.log(kTransformation.e,kTransformation.f)
console.log(currentDrawClientRect.left,currentDrawClientRect.top)
kTransformation.e = kTransformation.e-currentDrawClientRect.left-currentDrawClientRect.width/2+scrCenterCoords.x;
kTransformation.f = kTransformation.f-currentDrawClientRect.top-currentDrawClientRect.height/2+scrCenterCoords.y;
//Aplico la transformación al CTM actual del dibujo
setCTM(gRootDraw, kTransformation);
}
]]>
</script>
<!-- ****************************************************** DRAW *********************************** -->
<g>
<rect id="draw" x="200" y="200" width="500" height="200" fill="aliceblue" stroke="#000000" stroke-width="2" ></rect>
</g>
<g id="cmdButton">
<path stroke="#000000" fill="yellow" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M10,10h46c1.104,0,2,0.895,2,2v21c0,1.104-0.896,2-2,2h-46c-1.104,0-2-0.896-2-2v-21"/>
<text x="10" y="28">¡SCALE!</text>
</g>
<text x="10" y="50">width:</text>
<text x="10" y="90">height:</text>
<foreignObject x="10" y="55" width="50" height="40">
<div xmlns="http://www.w3.org/1999/xhtml">
<input id="textx" type="text" style="width:45px;" defaultValue="500">500</input>
</div>
</foreignObject>
<foreignObject x="10" y="95" width="50" height="40">
<div xmlns="http://www.w3.org/1999/xhtml">
<input id="texty" type="text" style="width:45px;" defaultValur="200">200</input>
</div>
</foreignObject>
</svg>
