2

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.

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.

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.

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.

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.

4

1 に答える 1

7

私はこれらの質問でこの質問にもっと深く答えました：

つまり、（a）スケーリング解除要素を配置するために使用transform="translate(…,…)し、（b）ラッパーで変換を調整するたびに（SVGPanのように）、スケーリングしたくない各要素をこの関数に渡します。

// 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と直接連携するように設計されたヘルパーメソッドについても説明しているため、ライブラリ（2つの関数）を含め、noscale各マーカーにクラスを追加して、次のように記述します。

unscaleEach('#viewport .noscale');
于 2012-05-23T05:37:30.720 に答える