我正在开发一个(2D)计算几何库,我希望能够吐出图片来帮助调试。我想要的图元是点、线段和文本。但我事先不知道我有兴趣查看什么比例(也许只有一小部分多边形无法正常工作),所以我也需要能够缩放和平移图像。
我挂了SVGPan当我在 Chrome 中查看生成的图像时,可以平移和缩放它们,但是(可以理解)所有基元都随着缩放而缩放,因为 SVGPan 仅通过使用缩放变换来工作。因此,放大无助于弄清楚非常小的特征区域中发生了什么。
我找到了矢量效应属性,它通过让我指定以像素为单位的宽度来很好地修复线段。但这并不能帮助我管理文本。理想情况下,无论变换比例有多大,它都是 12 pt。
而且我对于画点也还是一头雾水。我以为我可以使用圆圈,但半径也会缩放,所以如果放大得太远,它看起来就像一堆圆圈而不是点。如果我使用矢量效果属性,圆的笔划宽度将不再缩放,但圆的半径仍然会缩放。所以我最终得到的是带有细轮廓的大圆圈,而不是半径为一两个像素的小圆圈。
有没有办法只缩放元素的位置?我真的总是希望线、点和文本无论比例如何都显示相同的大小,并且只缩放它们的位置。我的 SVG 文件都是机器生成的,严格来说是为了帮助我编码,所以如果有人有任何想法,我不介意奇怪的黑客攻击。或者如果有另一种技术代替 SVG,对于这个用例来说更有意义。
我在这些问题中更深入地回答了这个问题:
- 如何使用 Javascript 在 SVG 中绘制不可缩放的圆
- 缩放父元素时保留后代元素的大小
简而言之,您想要 (a) 使用transform="translate(…,…)
定位缩放元素,并且 (b) 每次在某个包装器上调整变换时(如 SVGPan 所做的那样)将您不希望缩放的每个元素传递给此函数:
// Copyright 2012 © Gavin Kistner, [email protected]
// License: http://phrogz.net/JS/_ReuseLicense.txt
// Counteracts all transforms applied above an element.
// Apply a translation to the element to have it remain at a local position
function unscale(el){
var svg = el.ownerSVGElement;
var xf = el.scaleIndependentXForm;
if (!xf){
// Keep a single transform matrix in the stack for fighting transformations
xf = el.scaleIndependentXForm = svg.createSVGTransform();
// Be sure to apply this transform after existing transforms (translate)
el.transform.baseVal.appendItem(xf);
}
var m = svg.getTransformToElement(el.parentNode);
m.e = m.f = 0; // Ignore (preserve) any translations done up to this point
xf.setMatrix(m);
}
上面第一个问题的答案还描述了一个旨在直接与 SVGPan 一起使用的帮助器方法,因此您所要做的就是包含我的库(两个函数),添加一个noscale
对每个标记进行类,然后编写如下内容:
unscaleEach('#viewport .noscale');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)