【问题标题】:SVG how to get absolute coordinate for transform with translate and rotate in JavaSVG如何在Java中通过翻译和旋转获取变换的绝对坐标
【发布时间】:2019-01-29 03:44:51
【问题描述】:

目前我正在使用 batik 库进行 SVG 操作。 下面是我的元素:

<g id="FrontRight_1">
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M335.775,3550.251l886.631,198.611
    c0,0-17.461-467.823-190.26-756.729c-172.794-288.907-243.793-385.207-281.208-529.649
    c-37.417-144.446-65.087-385.58-29.396-544.164l-431.396-161.81c0,0-100.354,225.707-99.356,607.059
    c0.598,228.37,83.309,362.999,112.561,620.65C323.833,3164.645,338.045,3532.962,335.775,3550.251z"/>

它的原始坐标是:190.7826,1756.51

变换后函数如下:

<g id="FrontRight_1" transform="translate(-1751.828610 1227.40240) rotate(270.0)"> <path d="M335.775 3550.251 L1222.406 3748.862 L1222.406 3748.862 L1204.945 3281.039 L1032.146 2992.1329 L859.352 2703.226 L788.3529 2606.926 L750.938 2462.4841 L713.521 2318.038 L685.851 2076.904 L721.542 1918.3201 L290.146 1756.51 L290.146 1756.51 L189.7919 1982.217 L190.79 2363.569 L191.388 2591.939 L274.099 2726.568 L303.3509 2984.2192 L323.833 3164.645 L338.045 3532.962 L335.775 3550.251 Z" fill="#8498d1" stroke="#010101" stroke-width="1" /> </g>

需要知道上面元素的新绝对坐标

谢谢

【问题讨论】:

  • 你是否使用 svg.js?
  • 不,我正在使用蜡染库创建用于 SVG 操作的 Java 应用程序
  • 所以总结一下(因为你的问题有点不清楚),如果你应用相同的变换,你想知道 (190.7826,1756.51) 的新坐标是什么,你的第二个 @987654323 @ 已。对吗?
  • @Paul ,是的,这就是我想要的

标签: java svg transform svg-filters


【解决方案1】:

Batik 支持 SVG DOM,因此方法应该与下面的 Javascript 示例相同。

var g   = document.getElementById("FrontRight_1");
var svg = g.ownerSVGElement;

var pt = svg.createSVGPoint();
pt.x = 190.7826;
pt.y = 1756.51;

var groupTransformMatrix = g.transform.baseVal.consolidate().matrix;

pt = pt.matrixTransform(groupTransformMatrix);
console.log("pt=",pt);
<svg>
  <g id="FrontRight_1" transform="translate(-1751.828610 1227.40240) rotate(270.0)">
  </g>
</svg>

应该只是将代码移植到 Java 的问题。我不是 Batik 用户,但应该是这样的:

SVGDocument   document = canvas.getSVGDocument();
SVGGElement   g        = (SVGGElement) document.getElementById("FrontRight_1");
SVGSVGElement svg      = g.getOwnerSVGElement();

SVGPoint pt = svg.createSVGPoint();
pt.setX(190.7826f);
pt.setY(1756.51f);

SVGMatrix groupTransformMatrix = g.getTransform().getBaseVal().consolidate().getMatrix();

pt = pt.matrixTransform(groupTransformMatrix);

【讨论】:

  • 感谢回复,其实point没有getTransform方法,但是我们可以得到SVGMatrix。 pt = pt.matrixTransform(groupTransformMatrix);在上述方法调用之后,我得到相同的点值还有其他方式吗?
  • 对不起。您需要将g 转换为SVGGElement 才能使用getTransform()。我会更新我的答案。
  • 非常感谢,它正在工作,但是对于旋转 180,新坐标点似乎不太准确,将与另外几个用例一起检查。
  • 如果没有轮换,以上解决方案可行,请问您有其他解决方案吗
  • 它适用于任何转换,无论是否有旋转。如果您对特定案例有疑问,请发布带有代码示例的新问题,我们可以查看。
猜你喜欢
  • 2013-07-07
  • 1970-01-01
  • 1970-01-01
  • 2021-11-21
  • 1970-01-01
  • 1970-01-01
  • 2012-11-10
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多