首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使路径和图像在Raphael js中可拖动。

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

Stack Overflow用户
提问于 2010-11-19 19:06:20
回答 5查看 14.2K关注 0票数 19

是否有可能使用Raphael在页面周围拖放对象,而不仅仅是圆圈和矩形?

我想添加路径和图像,然后你可以到处移动,但它证明是棘手的。我想和拉斐尔一起解决这个问题,因为它支持触摸界面。

以下是代码

代码语言:javascript
复制
<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>
EN

回答 5

Stack Overflow用户

发布于 2011-01-27 06:56:37

这里的关键(我找到的)是将x和y增量转换为转换值,path对象可以理解这些值。

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

有效地使用相同的方法:

代码语言:javascript
复制
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);
票数 14
EN

Stack Overflow用户

发布于 2013-04-03 05:12:32

当翻译在拉斐尔中被弃用时,我已经修改了Nathan的答案以使用transform:

代码语言:javascript
复制
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);

对于拉斐尔来说,我是一个相对较新的人,我是通过反复试验才想到这一点的,所以外面的人可能会解释为什么它是有效的,或者是一种更干净的方式;)

票数 4
EN

Stack Overflow用户

发布于 2010-12-06 16:02:00

对于非圆,请尝试此方法。我认为Circle属性不同于图像、文本等。

代码语言:javascript
复制
    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, ">");
    };
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/4224359

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档