如何使用 snap svg 初始存在图像矩阵？

Question

谢谢lan who helped me to complete svg transform with slider Fiddle。

在一些进展之后我又遇到了另一个问题it.If图像已经存在矩阵，我应该如何在开始时将它应用到滑块上？作为 Fiddle 示例，当我拖动滑块时图像行为看起来很奇怪。

$(function() {
    Snap.plugin(function(Snap, Element, Paper, global) {
        Element.prototype.updateTransform = function() {
            var newTransform = 't' + (this.data('xy').x) + ',' + (this.data('xy').y);
            newTransform += 'r' + (this.data('r'))
            newTransform += 's' + (this.data('s'))
            this.transform(newTransform)
            return this;
        }
        Element.prototype.init = function() {
            return this.data('xy', {
                    x: 0,
                    y: 0
                })
                .data('r', 0)
                .data('s', 1)
        }

    });

    function dragStart(x, y) {
        this.data('oxy', this.data('xy'));
    }

    function dragMove(dx, dy, x, y) {
        this.data('xy', {
                x: this.data('oxy').x + dx,
                y: this.data('oxy').y + dy
            })

            .updateTransform();
    }
    obj = Snap(".cat");
    obj.init();
    obj.drag(dragMove, dragStart);

    //Slider resize
    $("#slider_resize").slider({
        max: 4,
        min: 1,
        step: 0.1,
        slide: function(event, ui) {
            obj.data('s', ui.value)
                .updateTransform();
        }
    });
    //Slider rotate
    $("#slider_rotate").slider({
        max: 360,
        min: 0,
        step: 1,
        value: 0,
        slide: function(event, ui) {
            obj.data('r', ui.value)
                .updateTransform();
        }
    });

    //Reset button
    $('#reset').click(function() {
        $("#slider_resize").slider('value', 0);
        $("#slider_rotate").slider('value', 0);
        obj.init().updateTransform();
    });
});

Answer 1

您可以存储初始变换，然后每次将其添加到新变换的开始处..因此相关位将是...

在我们的初始化函数中，检查我们是否存储了初始转换，如果没有存储它。我们只想这样做一次（否则你不能使用重置按钮）。

if( !this.data('origTransform') ) this.data('origTransform', this.transform())

在更新变换函数中，我们可以将原始变换添加到我们正在操作的新变换中，例如

this.transform( this.data('origTransform') + newTransform )

jsfiddle

这 'may' 是您想要的，具体取决于初始转换中的内容（因为后续转换受其影响）。如果不是，它可能会开始变得非常复杂，因为矩阵不是真正可逆的（例如从矩阵的正确翻译），但可能有一种方法取决于要求:)。我会通过对图像进行初始旋转和缩放来测试它，看看它是否符合您的要求（如果这是您最终支持的）。

如何使用 snap svg 初始存在图像矩阵？

How to initial exist image matrix with snap svg?

javascript

svg

snap.svg