SVG中的可拖动和可调整大小

Question

我想让一个svg元素(路径,矩形或圆形)能够被拖动并给它调整大小句柄.

但与HTML DOM不同,并非所有元素都有左上角x,y坐标以及围绕内容的框的宽度和高度.这使得制作通用调整大小或拖动过程变得不方便.

让每个路径或圆圈都在自己的svg对象中绘制,给我一个可以玩的盒子是个好主意吗？

如何在SVG中实现可拖动/可调整大小？

Answer 1

注意:对于拖动和调整大小,您必须为某些不同类型的元素分别创建案例.看一下我稍后提供的示例,该示例处理在同一组函数中拖动椭圆和矩形.

要使元素可拖动,您可以使用:

element.drag(move, start, up);

这三个参数是对处理移动(拖动),启动(鼠标按下)和停止(mouseup)的函数的引用.

例如,制作一个可拖动的圆圈(来自文档):

window.onload = function() {
var R = Raphael("canvas", 500, 500);    
var c = R.circle(100, 100, 50).attr({
    fill: "hsb(.8, 1, 1)",
    stroke: "none",
    opacity: .5
});
var start = function () {
    // storing original coordinates
    this.ox = this.attr("cx");
    this.oy = this.attr("cy");
    this.attr({opacity: 1});
},
move = function (dx, dy) {
    // move will be called with dx and dy
    this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {
    // restoring state
    this.attr({opacity: .5});
};
c.drag(move, start, up);    
};?

jsFiddle例子

在上面的示例中,将ox和oy属性添加到元素上以跟踪其位置,并将这些属性与元素结合使用dx,dy并用于在元素被拖动时更改元素的位置.

一个更复杂的拖放来回答这个问题.

要使对象可调整大小,您只需为缩放器创建第二组拖放方法,然后调整目标元素height并width基于拖动缩放器.

这是我写的一个完整的拖放和可调整大小的框:

jsFunder拖放和可调整大小的框的示例

window.onload = function() {
var R = Raphael("canvas", 500, 500),
    c = R.rect(100, 100, 100, 100).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5,
            cursor: "move"
        }),
    s = R.rect(180, 180, 20, 20).attr({
            fill: "hsb(.8, .5, .5)",
            stroke: "none",
            opacity: .5
        }),
    // start, move, and up are the drag functions
    start = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.attr({opacity: 1});

        this.sizer.ox = this.sizer.attr("x");
        this.sizer.oy = this.sizer.attr("y");
        this.sizer.attr({opacity: 1});
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({x: this.ox + dx, y: this.oy + dy});
        this.sizer.attr({x: this.sizer.ox + dx, y: this.sizer.oy + dy});        
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        this.sizer.attr({opacity: .5});        
    },
    rstart = function () {
        // storing original coordinates
        this.ox = this.attr("x");
        this.oy = this.attr("y");

        this.box.ow = this.box.attr("width");
        this.box.oh = this.box.attr("height");        
    },
    rmove = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({x: this.ox + dx, y: this.oy + dy});
        this.box.attr({width: this.box.ow + dx, height: this.box.oh + dy});
    };   
    // rstart and rmove are the resize functions;
    c.drag(move, start, up);
    c.sizer = s;
    s.drag(rmove, rstart);
    s.box = c;
};?

包含的事件处理程序(当然可以结合使用更多.node())和拖放描述位于文档的页面底部.

你只需制作一个拉斐尔画布,然后每个项目将是一个不同的元素.只需将它们分配给变量就可以处理它们,就像上面的例子一样(c用于引用创建的圆形元素).

响应评论,这里是一个简单的拖放+调整大小的圆圈.诀窍是圈子使用属性cx,cy定位和r大小.机制几乎相同......椭圆会稍微复杂一些,但这又是一个使用正确属性的问题.

jsFunder拖放和可调整大小的圆圈示例

window.onload = function() {
    var R = Raphael("canvas", 500, 500),
        c = R.circle(100, 100, 50).attr({
            fill: "hsb(.8, 1, 1)",
            stroke: "none",
            opacity: .5
        }),
        s = R.circle(125, 125, 15).attr({
            fill: "hsb(.8, .5, .5)",
            stroke: "none",
            opacity: .5
        });
    var start = function () {
        // storing original coordinates
        this.ox = this.attr("cx");    
        this.oy = this.attr("cy");

        this.sizer.ox = this.sizer.attr("cx");    
        this.sizer.oy = this.sizer.attr("cy")

        this.attr({opacity: 1});
        this.sizer.attr({opacity: 1});
    },
    move = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({cx: this.ox + dx, cy: this.oy + dy});
        this.sizer.attr({cx: this.sizer.ox + dx, cy: this.sizer.oy + dy});
    },
    up = function () {
        // restoring state
        this.attr({opacity: .5});
        this.sizer.attr({opacity: .5});
    },
    rstart = function() {
        // storing original coordinates
        this.ox = this.attr("cx");
        this.oy = this.attr("cy");        

        this.big.or = this.big.attr("r");
    },
    rmove = function (dx, dy) {
        // move will be called with dx and dy
        this.attr({cx: this.ox + dy, cy: this.oy + dy});
        this.big.attr({r: this.big.or + Math.sqrt(2*dy*dy)});
    };
    c.drag(move, start, up);    
    c.sizer = s;
    s.drag(rmove, rstart);
    s.big = c;
};