在Raphael js中制作路径和图像可拖动

时间:2010-11-19 11:06:20

标签: drag-and-drop javascript raphael

是否可以使用Raphael js在页面周围拖放除圆形和矩形以外的对象?

我想添加路径和图像,然后你可以移动,但它证明是棘手的。 我想与Raphael合作,因为它支持触摸界面。

这是代码

<script>
    window.onload = function () {
        var R = Raphael(0, 0, "100%", "100%"),
            r = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5}),
            g = R.circle(210, 100, 50).attr({fill: "hsb(.3, 1, 1)", stroke: "none", opacity: .5}),
            b = R.circle(320, 100, 50).attr({fill: "hsb(.6, 1, 1)", stroke: "#fff", "fill-opacity": 0, "stroke-width": 0.8, opacity: .5}),
            p = R.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z") .attr({fill: "hsb(.8, 1, 1)", stroke: "none", opacity: .5});
        var start = function () {
            this.ox = this.attr("cx");
            this.oy = this.attr("cy");
            this.animate({r: 70, opacity: .25}, 500, ">");
        },
        move = function (dx, dy) {
            this.attr({cx: this.ox + dx, cy: this.oy + dy});
        },
        up = function () {
            this.animate({r: 50, opacity: .5}, 500, ">");
        };
        R.set(r, g, b, p).drag(move, start, up);
    };
</script>

7 个答案:

答案 0 :(得分:13)

这里的关键(我发现)是将x和y增量转换为路径对象理解的转换值。

http://www.nathancolgate.com/post/2946823151/drag-and-drop-paths-in-raphael-js

实际上采用相同的方法:

var paper = Raphael(10, 50, 320, 200);

var tri = paper.path("M0 0L0 20L25 10L0 0Z").attr("fill", "#ff0");
var rex = paper.rect(10, 20, 50, 50).attr("fill", "#ff0");

var start = function () {
  this.odx = 0;
  this.ody = 0;
  this.animate({"fill-opacity": 0.2}, 500);
},
move = function (dx, dy) {
  this.translate(dx - this.odx, dy - this.ody);
  this.odx = dx;
  this.ody = dy;
},
up = function () {
    this.animate({"fill-opacity": 1}, 500);
};

tri.drag(move, start, up);
rex.drag(move, start, up);

答案 1 :(得分:3)

由于翻译在拉斐尔被弃用,我已经修改了内森对改造工作的回答:

var paper = Raphael(10, 50, 320, 200);

var tri = paper.path("M0 0L0 20L25 10L0 0Z").attr("fill", "#ff0");

var start = function () {
  this.lastdx ? this.odx += this.lastdx : this.odx = 0;
  this.lastdy ? this.ody += this.lastdy : this.ody = 0;
  this.animate({"fill-opacity": 0.2}, 500);
},
move = function (dx, dy) {
  this.transform("T"+(dx+this.odx)+","+(dy+this.ody));
  this.lastdx = dx;
  this.lastdy = dy;
},
up = function () {
  this.animate({"fill-opacity": 1}, 500);
};

tri.drag(move, start, up);

我对Raphael相对较新,并通过反复试验提出了这个问题,所以那里的某个人可能会解释它为什么会起作用或更清洁的方式;)

答案 2 :(得分:1)

我不久前尝试过这个,并使用以下方法使其工作:

  • 添加一个最初隐藏,风格化,绝对定位的div,透明背景和合适的边框样式到您的页面,并使用jQuery / UI使其可拖动。
  • 向您希望可拖动的每个Rapahel / SVG元素添加一个单击事件,并在此事件中添加代码以调整大小并重新定位刚刚单击的元素上的div,然后使其可见。
  • 将代码添加到div中,该代码在拖动时更新Raphael元素的位置。

我对此进行了扩展以添加调整大小功能,这也很有效,但是今后看看拉斐尔内置的拖放功能(理想情况下正确集成到库中而不是使用jQuery)会非常棒,因为这些这些功能将为使用纯Raphael的浏览器内设计人员带来一大堆可能性。

答案 3 :(得分:1)

尝试使用非圆圈。我认为圈子属性与图像,文本等不同。

    var start = function () {
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        this.animate({r: 70, opacity: .25}, 500, ">");
    },
    move = function (dx, dy) {
        this.attr({x: this.ox + dx, y: this.oy + dy});
    },
    up = function () {
        this.animate({r: 50, opacity: .5}, 500, ">");
    };

答案 4 :(得分:1)

我会向您推荐 raphael.draggable 库,这对您来说很有用。我将它与地图应用程序一起使用,允许用户在地图上使用缩放然后拖动它。

我在IE8中遇到了这个库的问题,因为在函数事件中引用了mousedown,mousemove等.IE会抛出异常,告诉用户event为空。您可以通过将event替换为e并在raphael.draggable.js脚本中添加e = e || event来解决此问题。此修复程序不会影响其他浏览器。

因此,startDragger中的方法mouse是:

function startDragger() {
  document.onmousemove = function(e) {
    e = e || event
    if (paper.draggable.current()) {
      var transX = e.clientX - lastDragX;
      var transY = e.clientY - lastDragY;

      paper.draggable.current().translate(transX, transY);
      lastDragX = e.clientX;
      lastDragY = e.clientY;
    }
  };
}

链接:  https://github.com/mephraim/raphael.draggable

希望这可以帮到你。

答案 5 :(得分:0)

如果你理解Chris Butler给你的通常的拖动功能,那就不难了。 我用这个:

var start = function () {
  //storing original coordinates
  this.xSource = this.attrs.path[0][1];
  this.ySource = this.attrs.path[0][2];
  this.xDest = this.attrs.path[1][1];
  this.yDest = this.attrs.path[1][2];
  this.attr({opacity: 0.5});
  },
  move = function (dx, dy) {
  //move will be called with dx and dy
  var xS = this.xSource+dx;
  var xD = this.xDest+dx;
  var yS = this.ySource+dy;
  var yD = this.yDest+dy;
  this.attr({path: "M"+ xS +" "+ yS +"L"+ xD +" "+yD});
  },
  drag = function(){
  this.node.drag(this.move,this.start,this.up);
  };

您还可以知道使用this.type在函数中拖动哪种图形,以便您可以使这些函数适用于所有类型的图形。

答案 6 :(得分:0)

如果有人还在寻找解决方案,这里有一个可以缩放,旋转和拖动所有形状(包括路径)的插件。

https://github.com/ElbertF/Raphael.FreeTransform