Rafael如何使用JS缩放2个单独的路径对象

时间:2018-06-28 22:22:54

标签: javascript html raphael

我目前正在以SVG格式绘制我的国家的地图,该地图分为地区和一些城镇。 当我将鼠标悬停在上面时,我想对所有比例进行缩放,这已经成功地进行了工作。但是现在,当我将鼠标悬停在其所在的区域上时,我也想对城镇进行缩放。由于比例的中心是“ t匹配。有人知道如何解决这个问题吗?

JavaScript

    function scaleObject(object , ratio, cx, cy) {
    object.scale(ratio, ratio, cx, cy);
}

for (var i = 0; i < okresy.length; i++) {
    if (okresy[i].data('vlastnik') == 'VODARNA') {

    }

    okresy[i].mouseover(function(e) {
        document.getElementById('okres_name').innerHTML = this.data('id');

        currentOkres = this;
        var bbox = currentOkres.getBBox();
        var cx = bbox.cx;
        var cy = bbox.cy;
        var scaleRatio = 1.3;

        currentOkres.animate( scaleObject(currentOkres, scaleRatio), 200, 'easeIn'); 
        currentOkres.attr({ 'stroke': 'white', 'stroke-width': '2' });        
        console.log(cx + "," + cy);
        currentOkres.toFront();

        if (currentOkres.data('child1') != undefined) {
            currentOkres.animate(scaleObject(findPathById(okresy, currentOkres.data('child1')), scaleRatio + .2), 200, 'easeIn');
            findPathById(okresy, currentOkres.data('child1')).attr({ 'stroke': 'white', 'stroke-width': '2' });
            findPathById(okresy, currentOkres.data('child1')).toFront();

            if (currentOkres.data('child2') != null) {
                findPathById(okresy, currentOkres.data('child2')).scale(1.3, 1.3, currentOkres.scale('cx'), currentOkres.scale('cy'));
                findPathById(okresy, currentOkres.data('child2')).attr({ 'stroke': 'white', 'stroke-width': '2' });
                findPathById(okresy, currentOkres.data('child2')).toFront();

                if (currentOkres.data('child3') != null) {
                    findPathById(okresy, currentOkres.data('child3')).scale(1.3, 1.3, currentOkres.scale('cx'), currentOkres.scale('cy'));
                    findPathById(okresy, currentOkres.data('child3')).attr({ 'stroke': 'white', 'stroke-width': '2' });
                    findPathById(okresy, currentOkres.data('child3')).toFront();
                }
            }
        }
    });

    okresy[i].mouseout(function(e) {
        this.scale(10/13, 10/13);
        this.attr({ 'stroke-width': '0' });

        if (this.data('child1') != undefined) {
            findPathById(okresy, this.data('child1')).node.style.opacity = 1;
            findPathById(okresy, this.data('child1')).scale(10 / 13, 10 / 13);
            if (this.data('child2') != null) {
                findPathById(okresy, this.data('child2')).node.style.opacity = 1;
                if (this.data('child3') != null) {
                    findPathById(okresy, this.data('child3')).node.style.opacity = 1;
                }
            }
        }
    });
}

0 个答案:

没有答案