Question

是否可以使用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>

Answer 1

这里的关键（我发现）是将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);

Answer 2

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

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相对较新，并通过反复试验提出了这个问题，所以那里的某个人可能会解释它为什么会起作用或更清洁的方式;）

Answer 3

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

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

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

Answer 4

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

    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, ">");
    };

Answer 5

我会向您推荐 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

希望这可以帮到你。

Answer 6

如果你理解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在函数中拖动哪种图形，以便您可以使这些函数适用于所有类型的图形。

Answer 7

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

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

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

7 个答案: