比例独立元素 [英] Scale independent elements
问题描述
我有一个正在使用的(2D)计算几何库，我希望能够吐出图片来帮助调试.我想要的图元是点，线段和文本.但是我事先不知道要关注什么比例(也许只有一小部分多边形无法正常工作)，因此我还需要能够缩放和平移图像.
I have a (2D) computational geometry library I'm working on, and I'd like to be able to spit out pictures to help debug. The primitives I want are points, line segments, and text. But I don't know before hand what scale I'll be interested in looking at (maybe only a small part of the polygon isn't working right), so I need to be able to zoom and pan around the image as well.
我连接了 SVGPan ，以便在查看生成的图像时进行平移和放大Chrome，但是(可以理解)所有原语都随着缩放而缩放，因为SVGPan仅通过使用缩放变换即可工作.因此，放大无助于找出非常小的特征区域中发生的事情.
I hooked up SVGPan to pan and zoom in my generated images when I view them in Chrome, but (understandably) all the primitives are scaling with the zoom, since SVGPan works just by using a scaling transform. So zooming in doesn't help figure out what's going on in very small feature regions.
我发现了 vector-effect 属性，该属性可以解决此问题让我指定一个以像素为单位的宽度，可以很好地细分.但这并不能帮助我管理文本.理想情况下，无论转换规模有多大，它都应为12磅.
I found the vector-effect property, which fixes the line segments quite nicely by letting me specify a width in pixels. But it doesn't help me manage the text. Ideally it'd be 12 pt no matter how large the transform scale is.
我对绘画点仍然不知所措.我以为可以用圆，但是半径也会缩放，所以如果放大得太远，它看起来像是一堆圆而不是点.如果使用vector-effect属性，则圆的笔触宽度将不再缩放，但圆的半径仍会缩放.因此，我最终得到了一个轮廓较细的大圆圈，而不是一个半径为一两个像素的小圆圈.
And I'm also still at a loss about drawing points. I thought I could use circles, but the radius also scales, so if you zoom in too far it just looks like a bunch of circles instead of points. If I use the vector-effect property, the stroke width of the circle won't scale anymore, but the radius of the circle still does. So I end up with large circles with thin outlines, instead of a small circle a pixel or two in radius.
也许只有一种方法可以缩放元素的位置吗?我确实一直希望线条，点和文本无论大小如何都显示相同的大小，并且只具有位置大小.我的SVG文件都是机器生成的，并且严格地帮助我进行编码，因此，如果有人有任何想法，我就不会介意奇怪的黑客攻击.或者，如果还有另一种技术(而不是SVG)在这种用例中更有意义.
Is there a way to only scale positions for elements, maybe? I really always want the lines, points, and text to appear the same size regardless of scale, and only have their positions scale. My SVG files are all machine generated and strictly to help me coding, so I don't mind odd hacks, if anyone has any ideas. Or if there's another technology instead of SVG that would make more sense for this use case.
推荐答案
我在以下问题中对此问题做了更深入的回答:
I've answered this question more in-depth in these questions:
- How to draw non-scalable circle in SVG with Javascript
- Preserve descendant elements' size while scaling the parent element
简而言之，您想要(a)使用transform="translate(…,…)放置未缩放元素，并且(b)每次在某些包装器上调整转换时(如SVGPan一样)，将您不想缩放的每个元素传递给此函数:
In short, you want to (a) use transform="translate(…,…) to position the unscaling elements and (b) each time you adjust the transform on some wrapper (like SVGPan does) pass each element you want to not scale to this function:
// Copyright 2012 © Gavin Kistner, !@phrogz.net
// 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类，然后编写类似:
The answer to the first question above also describes a helper method designed to work directly with SVGPan so all you have to do is include my library (two functions), add a noscale class to each marker and then write something like:
unscaleEach('#viewport .noscale');
这篇关于比例独立元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
