如何使用snap svg初始存在图像矩阵? [英] How to initial exist image matrix with snap svg?

问题描述

感谢 lan ，他帮助我使用滑块

解决方案

您可以存储初始转换，然后每次将其添加到新转换的开始.这样相关的位将是...

在我们的init函数中，检查是否存储了初始转换(如果没有存储).我们只希望执行一次(否则您将无法使用重置"按钮).

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

在更新转换功能中，我们可以将原始转换添加到我们要处理的新转换中，例如

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

jsfiddle

这个可能"就是您想要的，具体取决于初始转换中的内容(因为后续转换会受到其影响).如果不是这样，它可能会变得非常复杂，因为矩阵实际上不是可逆的(例如，从矩阵正确转换)，但是可能有一种方法取决于需求:).我会先对它进行初始旋转并在图像上缩放，然后进行测试，看看它是否满足您的要求(如果那样的话，您最终会得到支持).

Thanks lan who helped me to complete svg transform with slider Fiddle.

After some progresses I got another problem about it.If the image has exist matrix, how should I apply it to the slider at the beginning? As Fiddle example, the image behavior looks strange while I drag the slider.

$(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();
    });
});

解决方案

You can store the initial transform, and then add it on each time to the start of the new transform..so relevant bits would be...

In our init function, check if we have stored an initial transform, if not store it. We only want to do this once (otherwise you can't use the reset button).

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

In the update transform function, we can add the original transform to the new one which we are manipulating, e.g

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

jsfiddle

This 'may' be what you want, depending on what's in that initial transform (as subsequent transforms are affected by it). It may start to get very complicated if it isn't, as matrices aren't really reversable (eg the proper translation from a matrix) otherwise, but there may be a way depending on requirements :). I would test it with an initial rotation and scale on the image and see if it does what you want (if that's what you will end up supporting).

这篇关于如何使用snap svg初始存在图像矩阵?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！