Question

我当前的任务是尝试在相同的变换矩阵下组合具有相似矩阵的对象。这两个矩阵总是有前4位数，它的变换是相等的。我很难计算x =“???”和y =“???”为第二个tspan。任何对正确等式的帮助都将不胜感激。

输入

<svg>
<text transform="matrix(0 1 1 0 100 100)"><tspan x=0 y=0>foo</tspan></text>
<text transform="matrix(0 1 1 0 110 110)"><tspan x=0 y=0>bar</tspan></text>
</svg>

输出

<svg>
<text transform="matrix(0 1 1 0 100 100)">
<tspan x="0" y="0">foo</tspan>
<tspan x="???" y="???">bar</tspan>
</text>
</svg>

编辑1

我想我的问题更多的是给定一个点（x，y），如何将现有的矩阵变换应用于该点，以便位置不会移动，但是元素现在将嵌套在另一个元素。

编辑2

我已经将此代码用于（a，d）或（b，c）位置的0的矩阵。倾斜/倾斜的矩阵我还没有工作。有什么想法吗？

        var aX = floatX[0];
        var bX = floatX[1];
        var cX = floatX[2];
        var dX = floatX[3];
        var eX = floatX[4];
        var fX = floatX[5];

        var aY = floatY[0];
        var bY = floatY[1];
        var cY = floatY[2];
        var dY = floatY[3];
        var eY = floatY[4];
        var fY = floatY[5];

        var xX = (eX * aX) + (fX * bX);
        var xY = (eX * cX) + (fX * dX);

        var yX = (eY * aY) + (fY * bY);
        var yY = (eY * cY) + (fY * dY);

        var c1 = cX - aX;
        var c2 = dX + bX;

        return new float[] { (yX - xX) / (c1 * c2), (yY - xY) / (c1 * c2) };

Answer 1

如果我的逻辑没有缺陷，可能会有效的一个想法是找到一个元素到另一个元素的变换，然后可以用它来变换点0,0（因为它是原始的x，y）到一个新的位置。

一旦我们知道变换的差异是什么（假设矩阵中的前4个数字与问题中提到的相同，否则它将不起作用），我们可以计算出x，y的差异是什么

首先，由于某些浏览器已删除此功能，因此会有一些代码。

SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) {
    return elem.getScreenCTM().inverse().multiply(this.getScreenCTM());
};

这是一种svg方法，有些浏览器支持，但包括作为polyfill，以防你的（如Chrome）。它找到从一个元素到另一个元素的转换。

然后我们可以使用它来查找从第一个文本元素到第二个文本元素的转换。

var text1 = document.querySelector('#myText1')
var text2 = document.querySelector('#myText2')

var transform = text2.getTransformToElement( text1 )

或者如果你不想要填充物，这可能会起作用（矩阵不是我的强项！）。 getCTM（）获取元素的当前变换矩阵。

var transform = text1.getCTM().inverse().multiply( text2.getCTM() )

现在我们知道它们之间的转换是什么。我们也知道原始的x，y是0,0。所以我们可以创建一个svg点0,0，然后使用我们刚刚想到的矩阵对其进行变换，找到新的x，y。

var pt = document.querySelector('svg').createSVGPoint();
pt.x = 0; pt.y = 0;
var npt = pt.matrixTransform( transform );

然后只是一个延迟的例子来表明它被移动了。使用新的x，y来设置tspan，我们刚刚从上一次转换中得到。

setTimeout( function() {
    alert('new x,y is ' + npt.x + ',' + npt.y)
    tspan2.setAttribute('x', npt.x);
    tspan2.setAttribute('y', npt.y);
},2000);

带有polyfill的

jsfiddle

没有填充的

jsfiddle

在SVG相同的转换下组合两个矩阵变换

1 个答案: