Вопрос по svg – Шкала независимых элементов

2

У меня есть (2D) библиотека вычислительной геометрии, над которой я работаю, и я хотел бы иметь возможность выкладывать изображения, чтобы помочь в отладке. Я хочу примитивы - это точки, отрезки и текст. Но я заранее не знаю, в каком масштабе мне будет интересно посмотреть (может быть, только небольшая часть многоугольника работает неправильно), поэтому мне нужно иметь возможность масштабировать и перемещаться по изображению.

Я подключилSVGPan панорамирование и масштабирование моих сгенерированных изображений при просмотре их в Chrome, но (понятно) все примитивы масштабируются с масштабированием, поскольку SVGPan работает только с использованием преобразования масштабирования. Таким образом, увеличение не помогает выяснить, что происходит в очень маленьких функциональных областях.

Я нашелвектор-эффект свойство, которое довольно хорошо фиксирует отрезки, позволяя указать ширину в пикселях. Но это не помогает мне управлять текстом. В идеале это должно быть 12 pt независимо от того, насколько велик масштаб преобразования.

И я также до сих пор в растерянности относительно рисования точек. Я думал, что могу использовать круги, но радиус также масштабируется, поэтому, если вы увеличите масштаб слишком сильно, он будет выглядеть как группа кругов вместо точек. Если я использую свойство векторного эффекта, ширина обводки круга больше не будет масштабироваться, но радиус круга все равно будет изменяться. В итоге я получаю большие круги с тонкими контурами, а не маленький круг с радиусом в один или два пикселя.

Есть ли способ масштабировать позиции только для элементов? Я действительно всегда хочу, чтобы линии, точки и текст отображались одинакового размера независимо от масштаба и имели только масштаб своих позиций. Все мои SVG-файлы сгенерированы на компьютере и предназначены исключительно для написания кода, поэтому я не возражаю против лишних взломов, если у кого-то есть идеи. Или, если вместо SVG существует другая технология, которая имеет больше смысла для этого варианта использования.

возможный дубликатHow to draw non-scalable circle in SVG with Javascript Phrogz

Ваш Ответ

1   ответ
6

Я ответил на этот вопрос более подробно в следующих вопросах:

How to draw non-scalable circle in SVG with Javascript Preserve descendant elements' size while scaling the parent element

Короче говоря, вы хотите (а) использовать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');
@ Jay Sure; если вы посмотрите на код, все это делаетvar r = getRoot(evt.target.ownerDocument); [].forEach.call(r.querySelectorAll(selector), unscale); Так что вы можете просто позвонитьunscale на любой элемент, который вы хотите в любое время, когда вы хотите.
Я получил его на работу, добавив[].forEach.call(getRoot(window.root).querySelectorAll(selector), unscale); в концеunscaleEach функция. Это работает так, как я хочу сейчас; еще раз спасибо! Jay Lemmon
Спасибо, это действительно то, что я искал. За исключением того, что я заметил, что если существует группа обертки с масштабным преобразованием, она будет масштабировать немасштабирующие элементы до тех пор, пока вы не увеличите или уменьшите масштаб с помощью колесика мыши. Глядя на ваш код, это имеет смысл, поскольку код запускается только при подключении к событиям колеса мыши. Есть ли способ заставить скрипт unscaleEach работать при первой загрузке документа SVG? Jay Lemmon

Похожие вопросы