Привязать ограничивающую рамку Svg и преобразовать координаты

Я не могу понять, как разместить путь относительно ограничивающей рамки его родственного пути. Представьте себе коробку, похожую на окно, и я хочу поместить кнопку закрытия в ее верхний правый угол. Вот поле и кнопка закрытия, сгруппированные вместе после преобразования окна (увеличение его в 3 раза):

<g id="group24">
        <path id="path24" fill="#00aa00" stroke="#00ff00" stroke-width="4" stroke-miterlimit="10" d="M301,585.08v47h45.834l-0.134-21.8
            l12.3-0.2l-1-239H253v216c0,0,22,0.2,22,0c0-41,26-31.357,26-31.357V585.08L301,585.08z" transform="matrix(3,0,0,3,-612,-1003.16)"></path>

<path id="close-button" fill="#B40000" d="M256,232c-13.255,0-24,10.745-24,24s10.745,24,24,24s24-10.745,24-24
    S269.255,232,256,232z M265.102,270.277l-8.985-8.984l-8.985,8.985l-4.826-4.829l8.983-8.984l-8.984-8.984l4.829-4.826l8.983,8.982
    l8.981-8.983l4.83,4.827l-8.983,8.983l8.984,8.983L265.102,270.277z"></path>
</g>

Я просто добавляю кнопку после динамического преобразования поля (анимация обратного вызова) в группу group24, и кнопка закрытия выглядит следующим образом:

Кнопка

И после того, как я получаю ограничивающую рамку элемента path24 в группе и пытаюсь расположить кнопку закрытия в правом верхнем углу:

var p = this.SvgButton.select("path");
var bbox = myBox.getBBox();
var coordString = (bbox.x2 - 10) + " " + (bbox.y);
p.transform("T" + coordString);

координаты всегда неверны. Как я могу поместить кнопку закрытия в верхний правый угол светло-зеленого поля?

Пример того, чего я пытаюсь достичь, приведен здесь: http://jsfiddle.net/savpm8w3/1/ Обратите внимание, что масштабная анимация не работает в jsfiddle, поэтому пример в скрипке работает.


coordinates transform bounding-box snap.svg
person moonwalker    schedule 18.09.2014    source источник
comment
Можно ли создать базовый jsfiddle, показывающий это?   -  person Ian    schedule 18.09.2014
comment
Здравствуйте, я добавил пример jsfiddle, чего я пытаюсь добиться (без преобразований) здесь: jsfiddle.net/ savpm8w3/1. По какой-то причине масштабная анимация не работает в jsfiddle. Я хочу добиться этого с помощью 3-кратного масштабирования основного блока (rect1) после окончания анимации.   -  person moonwalker    schedule 18.09.2014
comment
Возможно, вы захотите вывести созданную вами матрицу и посмотреть, соответствует ли она тому, что вы думаете. Ради интереса попробуйте также getBBox(1), просто чтобы посмотреть, имеет ли это какое-то значение, в iirc было что-то вроде того, что если его 1, он будет учитывать преобразования (хотя я могу ошибаться!)   -  person Ian    schedule 19.09.2014

Ответы (1)


arrow_upward
4
arrow_downward

Мне удалось решить проблему, добавив в Snap.Svg плагин, который позиционирует элементы относительно ограничивающих рамок других объектов Snap. Его можно доработать, чтобы предоставить больше типов преобразования. Если кому интересно вот код:

    Snap.plugin( function( Snap, Element, Paper, global ) {
    Element.prototype.getCenter = function() {
        var bbox = this.getBBox();
        return {x: bbox.cx, y:bbox.cy};
    };
    Element.prototype.getSize = function() {
        var bbox = this.getBBox();
        return {w: bbox.width, h:bbox.height};
    };
    Element.prototype.getPos = function() {
        var bbox = this.getBBox();
        return {x: bbox.x, y:bbox.y};
    };
    Element.prototype.getTransformRelative = function(relativeObj, type, absolute, xadjust, yadjust) {
        var movex = 0;
        var movey = 0;
        switch (type) {
            case "center":
                var c = relativeObj.getCenter();
                var elpos = this.getPos();
                var elsize = this.getSize();
                var movex = c.x - (elsize.w / 2);
                var movey = c.y - (elsize.h / 2);

                movex = (elpos.x > movex ? 0 - (elpos.x - movex) : movex - elpos.x);
                movey = (elpos.y > movey ? 0 - (elpos.y - movey) : movey - elpos.y);
                break;
            case "topleft":
                var movepos = relativeObj.getPos();
                var elpos = this.getPos();

                movex = (elpos.x > movepos.x ? 0 - (elpos.x - movepos.x) : movepos.x - elpos.x);
                movey = (elpos.y > movepos.y ? 0 - (elpos.y - movepos.y) : movepos.y - elpos.y);
                break;
            case "bottomleft":
                var movepos = relativeObj.getBBox();
                var elpos = this.getPos();

                movex = (elpos.x > movepos.x ? 0 - (elpos.x - movepos.x) : movepos.x - elpos.x);
                movey = (elpos.y > movepos.y2 ? 0 - (elpos.y - movepos.y2) : movepos.y2 - elpos.y);
                break;
            case "topright":
                var movepos = relativeObj.getPos();
                var rsize = relativeObj.getSize();
                var elsize = this.getSize();
                var elpos = this.getPos();

                movex = (elpos.x > movepos.x ? 0 - (elpos.x - movepos.x) : movepos.x - elpos.x);
                movey = (elpos.y > movepos.y ? 0 - (elpos.y - movepos.y) : movepos.y - elpos.y);
                movex += rsize.w - elsize.w;
                break;
            case "bottomright":
                var movepos = relativeObj.getBBox();
                var rsize = relativeObj.getSize();
                var elsize = this.getSize();
                var elpos = this.getPos();

                movex = (elpos.x > movepos.x2 ? 0 - (elpos.x - movepos.x2) : movepos.x2 - elpos.x);
                movey = (elpos.y > movepos.y2 ? 0 - (elpos.y - movepos.y2) : movepos.y2 - elpos.y);
                break;
            case "topcenter":
                var c = relativeObj.getCenter();
                var rpos = relativeObj.getPos();
                var elpos = this.getPos();
                var elsize = this.getSize();
                var movex = c.x - (elsize.w / 2);

                movex = (elpos.x > movex ? 0 - (elpos.x - movex) : movex - elpos.x);
                movey = (elpos.y > rpos.y ? 0 - (elpos.y - rpos.y) : rpos.y - elpos.y);
                break;
            case "bottomcenter":
                var c = relativeObj.getCenter();
                var rpos = relativeObj.getBBox();
                var elpos = this.getPos();
                var elsize = this.getSize();
                var movex = c.x - (elsize.w / 2);

                movex = (elpos.x > movex ? 0 - (elpos.x - movex) : movex - elpos.x);
                movey = (elpos.y > rpos.y2 ? 0 - (elpos.y - rpos.y2) : rpos.y2 - elpos.y);
                break;
            case "leftcenter":
                var c = relativeObj.getCenter();
                var rpos = relativeObj.getPos();
                var elpos = this.getPos();
                var elsize = this.getSize();
                var movey = c.y - (elsize.h / 2);

                movex = (elpos.x > rpos.x ? 0 - (elpos.x - rpos.x) : rpos.x - elpos.x);
                movey = (elpos.y > movey ? 0 - (elpos.y - movey) : movey - elpos.y);
                break;
            case "rightcenter":
                var c = relativeObj.getCenter();
                var rbox = relativeObj.getBBox();
                var elpos = this.getPos();
                var elsize = this.getSize();
                var movey = c.y - (elsize.h / 2);

                movex = (elpos.x > rbox.x2 ? 0 - (elpos.x - rbox.x2) : rbox.x2 - elpos.x);
                movey = (elpos.y > movey ? 0 - (elpos.y - movey) : movey - elpos.y);
                break;
            default:
                console.log("ERROR: Unknown transform type in getTransformRelative!");
                break;
        }

        if (typeof(xadjust) === 'undefined') xadjust = 0;
        if (typeof(yadjust) === 'undefined') yadjust = 0;
        movex = movex + xadjust;
        movey = movey + yadjust;

        return (absolute ? "T"+movex+","+movey : "t"+movex+","+movey);
    };
});
person moonwalker    schedule 26.09.2014