假设我有一些如下所示的 SVG。#canvas
将应用一些变换:
<svg id="viewport" x="0" y="0" width="100%" height="100%">
<g id="canvas" transform="scale(0.17)">
<image class="imageTile" x="0" y="0" width="256" height="256"/>
<image class="imageTile" x="256" y="0" width="256" height="256"/>
<image class="imageTile" x="0" y="256" width="256" height="256"/>
<image class="imageTile" x="256" y="256" width="256" height="256"/>
</g>
</svg>
#canvas
将是可拖动的,所以当我拖动.imageTile
进入视图后,我将启动下载。
var tiles = Y.all(".imageTile");
for (var i = 0; i < tiles.size(); i++) {
if (the tile is visible - ??) {
// set its xlink:href attribute
}
}
我知道getScreenCTM()
会给我一个 SVGMatrix 对象,但我不知道如何使用它来计算交集。我也知道SVGElement.getIntersectionList()
方法,但似乎存在一些浏览器兼容性问题。有没有更好的办法?
在...的帮助下B. Campin 先生的 SVG 开放论文 http://www.svgopen.org/2005/papers/VectorAndRasterTilesForMappingApplications/, 我想到了:
var tile; // this is your SVG tile node
var svgroot = tile.ownerSVGElement;
var scale = svgroot.currentScale;
var vbParts = svgroot.getAttribute("viewBox").split(" ");
var vbx = parseInt(vbParts[0]);
var vby = parseInt(vbParts[1]);
var vbxu = parseInt(vbParts[2]);
var vbyu = parseInt(vbParts[3]);
var tx = svgroot.currentTranslate.x;
var ty = svgroot.currentTranslate.y;
var svgWidth = parseInt(svgroot.getAttribute("width"));
var svgHeight = parseInt(svgroot.getAttribute("height"));
var svgzoomfactor = vbxu / svgWidth;
var vpRect = svgroot.createSVGRect();
vpRect.x = parseFloat(vbx + (-tx) * (svgzoomfactor) / scale);
vpRect.y = parseFloat(vby + (-ty) * (svgzoomfactor) / scale);
vpRect.width = parseFloat(svgWidth * svgzoomfactor / scale);
vpRect.height = parseFloat(svgHeight * svgzoomfactor / scale);
if (svgroot.checkIntersection(tile, vpRect)) {
// the tile intersects the viewport!
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)