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

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

我不久前对此进行了实验，并使用以下方法使其正常工作：

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

我对此进行了扩展以添加调整大小功能，这也运行良好，但展望未来，如果能看到 Raphael 中内置的拖放和调整大小功能（理想情况下正确集成到库中而不是使用 jQuery）将会很棒，因为这些功能将打开使用纯粹的 Raphael 为浏览器内设计师提供了一大堆可能性。