logo标签列表

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

drag-and-dropjavascriptraphael
19

使用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个回答
14

我发现这里的关键是将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);
谢谢。但是有没有一种方法可以知道形状的最终（绝对）位置？ - Yako
Yako，你可以使用getBBox()。 - user963714
translate正在被弃用，请参考我的回答，使用transform来完成此操作。 - Rick Westera
4

由于 Raphael 中的 translate 已被弃用，因此我修改了 Nathan 的答案以使用 transform：

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相对较新，通过试错方法得出了这个结果，因此可能有人可以解释为什么它有效或更好的做法；）

尝试使用以下路径字符串进行上述回答：““M25 370 L10 370 L10 411 L25 411 L25 370 L61 370 L61 411 L25 411””，但它不起作用。我想知道为什么？ - kittu
1
我建议您使用 raphael.draggable 库，它可以为您完成这项技巧。我曾在一个地图应用程序中使用它，该应用程序允许用户在地图上使用缩放功能，然后拖动它。
我在 IE8 中使用此库时遇到了问题，因为在与 mousedown、mousemove 等事件相关的函数中，IE 会抛出异常，告诉用户 event 为空。您可以通过将 event 替换为 e 并在 raphael.draggable.js 脚本中添加 e = e || event 来解决此问题。这个修复不会影响其他浏览器。
因此，在 startDragger 中，mousemove 方法是：
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

希望这能对您有所帮助。

1

我之前尝试过这个，使用以下方法使其工作：

  • 在页面中添加一个最初隐藏、样式化、绝对定位的带有透明背景和合适边框样式的div，并使用jQuery/UI使其可拖动。
  • 为每个要拖动的Rapahel/SVG元素添加点击事件，在此事件中添加代码以调整并重新定位刚刚被单击的元素上方的div，然后使其可见。
  • 添加代码到div中，当它被拖动时更新Raphael元素的位置。

我扩展了这个功能以添加调整大小的功能，这也很好用，但是未来如果能够在Raphael中内置拖放和调整大小的功能（最好是真正集成到库中而不是使用jQuery），那么这些功能将为使用纯Raphael的浏览器设计师开启一系列可能性。

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, ">");
    };
0
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 知道你正在拖动哪种类型的图形，这样你就可以让这些函数适用于所有类型的图形。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接