Question

我正在编写一个SVG操作库，而我正在尝试实现转换。经过一些阅读后，我想我会挖掘潜在的SVGMatrix对象并使用它的转换方法。到目前为止，我已经实现了translate和flip方法并按照我的预期工作，但我无法使旋转方法起作用。嗯，不完全，rotate有效，我可以看到我正在测试的对象（rect）在我的屏幕周围疯狂旋转。我似乎无法工作的是rotateFromVector方法。到目前为止，我已尝试在rotate方法之后立即对其进行链接，但它没有按预期工作（我希望rect围绕其'中心'旋转。

我猜测传递给cx的{{1}}和cy值必须以某种方式预先计算，我不能只传入原始值？

如果有人可以查看下面的代码并让我知道我缺少什么，我会很感激。 JavaScript是从TypeScript编译而来的，万一有人想知道它为什么会这样。

rotateFromVector

Answer 1

rotateFromVector()不是您想要在这里使用的。它没有做你认为的事情。这是出于另一个目的。

如果你想绕点（cx，cy）旋转，那么你需要执行的步骤是：

将原点移动到cx，cy - 即。翻译（cx，cy）
旋转
将原点移回原处 - 即。翻译（-cx，-cy）

所以你的旋转功能应该是：

Matrix.prototype.rotate = function (a, cx, cy) {
    if (a === void 0) { a = 0; }
    if (cx && cy) {
        this.ctm = this.ctm.translate(cx, cy);
    }
    this.ctm = this.ctm.rotate(a);
    if (cx && cy) {
        this.ctm = this.ctm.translate(-cx, -cy);
    }
    this.apply();
};

此外，您应该能够稍微优化apply()功能。

Matrix.prototype.apply = function () {
    var svg = this.element.ownerSVGElement;
    var tf = svg.createSVGTransformFromMatrix(m);
    this.element.transform.baseVal.appendItem(tf);
};

这比使用矩阵的字符串化版本设置属性更有效。

Answer 2

我最终搞清楚了。事实证明，我无法直接传递度数，必须首先将其转换为弧度，然后必须进行计算。所以，下面是正确的代码：

var MatrixInfo = (function () {
    function MatrixInfo(a, b, c, d, e, f) {
        if (a === void 0) { a = 1; }
        if (b === void 0) { b = 0; }
        if (c === void 0) { c = 0; }
        if (d === void 0) { d = 1; }
        if (e === void 0) { e = 0; }
        if (f === void 0) { f = 0; }
        this.a = a;
        this.b = b;
        this.c = c;
        this.d = d;
        this.e = e;
        this.f = f;
    }
    MatrixInfo.parse = function (element) {
        var ctm = element.getScreenCTM();
        return new MatrixInfo(ctm.a, ctm.b, ctm.c, ctm.d, ctm.e, ctm.f);
    };
    return MatrixInfo;
})();

var SvgBase = (function () {
    function SvgBase() {
    }
    SvgBase.prototype.attr = function () {
        var args = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            args[_i - 0] = arguments[_i];
        }
        if (typeof (args[0]) === "object") {
            for (var _a = 0, _b = Object.keys(args[0]); _a < _b.length; _a++) {
                var k = _b[_a];
                this.attr(k, args[0][k]);
            }
            return this;
        }
        if (args[1] === null) {
            this.element.removeAttribute(args[0]);
            return this;
        }
        if (!args[1]) {
            return this.element.getAttribute(args[0]);
        }
        if (args[0] === "href") {
            this.element.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#" + args[1]);
        }
        else {
            this.element.setAttribute(args[0], args[1]);
        }
        return this;
    };
    return SvgBase;
})();

var SvgMatrixBuilder = (function (_super) {
    __extends(SvgMatrixBuilder, _super);
    function SvgMatrixBuilder() {
        _super.call(this);
        this.mI = new MatrixInfo();
    }
    SvgMatrixBuilder.prototype.apply = function () {
        this.attr("transform", "matrix(" + this.mI.a + "," + this.mI.b + "," + this.mI.c + "," + this.mI.d + "," + this.mI.e + "," + this.mI.f + ")");
    };
    SvgMatrixBuilder.prototype.refresh = function (element) {
        this.element = element;
        return this;
    };
    SvgMatrixBuilder.prototype.rotate = function (a, cx, cy) {
        var radian = .017453292519943295 * a, cos = Math.cos(radian), sin = Math.sin(radian);
        if (!cx && !cy) {
            var eI = ElementInfo.parse(this.element);
            cx = eI.width / 2 + eI.iX;
            cy = eI.height / 2 + eI.iY;
        }
        this.mI.a = cos;
        this.mI.b = sin;
        this.mI.c = -sin;
        this.mI.d = cos;
        this.mI.e = -cx * cos + cy * sin + cx;
        this.mI.f = -cx * sin - cy * cos + cy;
        this.apply();
    };
    SvgMatrixBuilder.prototype.translate = function (tx, ty) {
        if (tx === void 0) { tx = 0; }
        if (ty === void 0) { ty = 0; }
        this.mI.e = tx;
        this.mI.f = ty;
        this.apply();
    };
    return SvgMatrixBuilder;
})(SvgBase);

JavaScript SVG旋转无法按预期工作

2 个答案: