Question

感谢lan帮助我使用滑块Fiddle完成svg变换。

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

$(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

你可以存储初始变换，然后每次添加它到新变换的开始。所以相关位将是......

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

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

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

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

jsfiddle

这可能＆＃39;是你想要的，取决于初始变换中的内容（因为后续变换受其影响）。如果不是这样，它可能会开始变得非常复杂，因为矩阵不是真正可逆的（例如，从矩阵的正确平移），否则，可能有一种方式取决于要求:)。我会在图像上进行初始旋转和缩放测试，然后看看它是否符合您的要求（如果这样你最终会支持的话）。

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

1 个答案: