matrix in matrix ... positioning ?
"al_i_bi_bi" <[email protected]>
| Newsgroups | gmane.text.xml.svg.devel |
|---|---|
| Message-ID | <[email protected]> |
Hello,
I really can't understand how works a matrix in a matrix !
I have a foreground (containing a point in its center) in which i can zoom in and off.
I want, when i zoom in and off, that the point at the center keep its size, and its position in my foreground.
Can you please help me ? This my code :
Thanks a lot
Al
------------
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="620"
height="550"
onload="INIT(evt)"
>
<script type="text/ecmascript">
<![CDATA[
var transMatrix = [1,0,0,1,0,0];
function MATRIXTEMP(){
tempMatrix = laCIBLE.getAttributeNS(null, "transform").slice(7,-1).split(" ");
Xtemp = parseFloat(tempMatrix[4]);
Ytemp = parseFloat(tempMatrix[5]);
ECHtemp = parseFloat(tempMatrix[0]);
Wtemp = parseInt(laCIBLE.getAttributeNS(null,"width"));
Htemp = parseInt(laCIBLE.getAttributeNS(null,"height"));
}
function ZOOMER(plusOUmoins){
laCIBLE = thisSVG.getElementById("FORGR");;
MATRIXTEMP();
// FORGR
var newECH = ECHtemp + (LOUPEpas*plusOUmoins);
tempMatrix[0] = newECH;
tempMatrix[3] = newECH;
Xold = (460/2)-Xtemp;
Yold = (550/2)-Ytemp;
Xreel = Xold/ECHtemp;
Yreel = Yold/ECHtemp
Xnew = Xreel*newECH;
Ynew = Yreel*newECH;
dX = Xnew-Xold;
dY = Ynew-Yold;
tempMatrix[4] = parseFloat(tempMatrix[4])-dX;
tempMatrix[5] = parseFloat(tempMatrix[5])-dY;
ECHtemp = newECH;
newMatrix = "matrix(" + tempMatrix.join(' ') + ")";
laCIBLE.setAttributeNS(null, "transform", newMatrix);
// POINTS
lePT = thisSVG.getElementById("POINT");
tempMatrixPT = lePT.getAttributeNS(null, "transform").slice(7,-1).split(" ");
newECHpt = 1/newECH;
tempMatrixPT[0] = newECHpt;
tempMatrixPT[3] = newECHpt;
//tempMATRIXPT[4] = How to keep the position ?
//tempMATRIXPT[5] = How to keep the position ?
newMatrixPT = "matrix(" + tempMatrixPT.join(' ') + ")";
lePT.setAttributeNS(null, "transform", newMatrixPT);
}
function INIT(evt) {
LOUPEpas = 0.25; //25%
if ( window.svgDocument == null ){
thisSVG = evt.target.ownerDocument;
}
}
]]>
</script>
<!-- CARTE -->
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="460" height="550">
<g id="BACKGR">
<rect x="0" y="0" width="460" height="550" fill="#CCFFFF" />
</g>
<g id="FORGR" transform="matrix(1 0 0 1 0 0)">
<g id="grille" x="0" y="0" width="460" height="550" transform="matrix(1 0 0 1 0 0)">
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="20" y1="0" x2="20" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="20" x2="0" y2="20"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="40" x2="0" y2="40"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="60" x2="0" y2="60"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="80" x2="0" y2="80"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="100" x2="0" y2="100"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="120" x2="0" y2="120"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="140" x2="0" y2="140"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="160" x2="0" y2="160"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="180" x2="0" y2="180"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="200" x2="0" y2="200"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="220" x2="0" y2="220"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="240" x2="0" y2="240"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="260" x2="0" y2="260"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="280" x2="0" y2="280"/>
<line fill="none" stroke="#FF0000" stroke-miterlimit="10" x1="460" y1="275" x2="0" y2="275"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="300" x2="0" y2="300"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="320" x2="0" y2="320"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="340" x2="0" y2="340"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="360" x2="0" y2="360"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="380" x2="0" y2="380"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="400" x2="0" y2="400"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="420" x2="0" y2="420"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="440" x2="0" y2="440"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="460" x2="0" y2="460"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="480" x2="0" y2="480"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="500" x2="0" y2="500"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="520" x2="0" y2="520"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="460" y1="540" x2="0" y2="540"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="40" y1="0" x2="40" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="60" y1="0" x2="60" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="80" y1="0" x2="80" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="100" y1="0" x2="100" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="120" y1="0" x2="120" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="140" y1="0" x2="140" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="160" y1="0" x2="160" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="180" y1="0" x2="180" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="200" y1="0" x2="200" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="220" y1="0" x2="220" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="240" y1="0" x2="240" y2="550"/>
<line fill="none" stroke="#FF0000" stroke-miterlimit="10" x1="230" y1="0" x2="230" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="260" y1="0" x2="260" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="280" y1="0" x2="280" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="300" y1="0" x2="300" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="320" y1="0" x2="320" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="340" y1="0" x2="340" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="360" y1="0" x2="360" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="380" y1="0" x2="380" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="400" y1="0" x2="400" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="420" y1="0" x2="420" y2="550"/>
<line fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="440" y1="0" x2="440" y2="550"/>
</g>
<g id="POINT" x="230" y="275" width="16" height="16" transform="matrix(1 0 0 1 0 0)">
<rect fill="#C43323" x="222" y="267" width="16" height="16" />
</g>
</g>
</svg>
<!-- ZOOM -->
<g id="ZOOM">
<g id="ZOOMOF" onclick="ZOOMER(-1)">
<rect x="460" y="10" width="20" height="20"/>
<line fill="none" stroke="#FFFF00" stroke-width="2" stroke-miterlimit="10" x1="465" y1="20" x2="475" y2="20" />
</g>
<g id="ZOOMON" onclick="ZOOMER(1)">
<rect x="460" y="40" width="20" height="20" />
<line fill="none" stroke="#FFFF00" stroke-width="2" stroke-miterlimit="10" x1="465" y1="50" x2="475" y2="50" />
<line fill="none" stroke="#FFFF00" stroke-width="2" stroke-miterlimit="10" x1="470" y1="45" x2="470" y2="55" />
</g>
</g>
</svg>
------------------
------------------------------------
-----
To unsubscribe send a message to: [email protected]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my membership"
----Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
[email protected]
[email protected]
<*> To unsubscribe from this group, send an email to:
[email protected]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/