blocks|key|871831|text|对于非圆，请尝试此方法。我认为Circle属性不同于图像、文本等。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|871832|++++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+%2B+dx,+y:+this.oy+%2B+dy});
++++},
++++up+=+function+()+{
++++++++this.animate({r:+50,+opacity:+.5},+500,+">");
++++};|code-block|syntax|javascript|871833|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this for non-circles. Circles attributes are different than images, text, etc, I think.

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

blocks|key|1086638|text|如果你理解Chris+Butler给你的常用的拖动函数，这并不难。我使用的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1086639|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%2Bdx;
++var+xD+=+this.xDest%2Bdx;
++var+yS+=+this.ySource%2Bdy;
++var+yD+=+this.yDest%2Bdy;
++this.attr({path:+"M"%2B+xS+%2B"+"%2B+yS+%2B"L"%2B+xD+%2B"+"%2ByD});
++},
++drag+=+function(){
++this.node.drag(this.move,this.start,this.up);
++};|code-block|syntax|javascript|1086640|您还可以使用this.type知道您在函数中拖动的是哪种类型的图形，这样您就可以使这些函数适用于所有类型的图形。|1086641|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

it's not that hard if you understand the usual dragging functions Chris Butler gave you.
I use this:

<pre><code>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);
 };
</code></pre>

You can also know which sort of figure you're dragging in the functions with this.type, so that you can make these functions work for all sort of figures.

blocks|key|1086697|text|这里的关键(我找到的)是将x和y增量转换为转换值，path对象可以理解这些值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1086698|http://www.nathancolgate.com/post/2946823151/drag-and-drop-paths-in-raphael-js|offset|length|1086699|有效地使用相同的方法：|1086700|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);|code-block|syntax|javascript|1086701|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|26|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|C]]]]

The key here (that I found) is to convert the x and y deltas into translate values, which the path object understands.

<a href="http://www.nathancolgate.com/post/2946823151/drag-and-drop-paths-in-raphael-js" rel="noreferrer">http://www.nathancolgate.com/post/2946823151/drag-and-drop-paths-in-raphael-js</a>

Effectively the same approach:

<pre><code>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);
</code></pre>

blocks|key|1086769|text|如果有人还在寻找解决方案，这里有一个插件，可以缩放、旋转和拖动包括路径在内的所有形状。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1086770|https://github.com/ElbertF/Raphael.FreeTransform|offset|length|1086771|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

In case anyone is still looking for a solution, here's a plugin that scales, rotates and drags all shapes including paths.

<a href="https://github.com/ElbertF/Raphael.FreeTransform" rel="nofollow">https://github.com/ElbertF/Raphael.FreeTransform</a>

blocks|key|872043|text|当翻译在拉斐尔中被弃用时，我已经修改了Nathan的答案以使用transform：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|872044|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+%2B=+this.lastdx+:+this.odx+=+0;
++this.lastdy+?+this.ody+%2B=+this.lastdy+:+this.ody+=+0;
++this.animate({"fill-opacity":+0.2},+500);
},
move+=+function+(dx,+dy)+{
++this.transform("T"%2B(dx%2Bthis.odx)%2B","%2B(dy%2Bthis.ody));
++this.lastdx+=+dx;
++this.lastdy+=+dy;
},
up+=+function+()+{
++this.animate({"fill-opacity":+1},+500);
};

tri.drag(move,+start,+up);|code-block|syntax|javascript|872045|对于拉斐尔来说，我是一个相对较新的人，我是通过反复试验才想到这一点的，所以外面的人可能会解释为什么它是有效的，或者是一种更干净的方式;)|872046|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

As translate is being deprecated in Raphael, I've modified Nathan's answer to work with transform:

<pre><code>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);
</code></pre>

I'm relatively new to Raphael and came up with this through trial and error, so someone out there might have an explanation of why it works or a cleaner way of doing it ;)

Is it possible to be able to drag and drop objects other than just circles and rectangles around a page using Raphael js?

I want to add in paths and images which you can then move around but its proving tricky.
I would like to work this out with Raphael because of its support with touch interfaces.

Here is the code

<pre><code>&lt;script&gt;
 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, "&gt;");
 },
 move = function (dx, dy) {
 this.attr({cx: this.ox + dx, cy: this.oy + dy});
 },
 up = function () {
 this.animate({r: 50, opacity: .5}, 500, "&gt;");
 };
 R.set(r, g, b, p).drag(move, start, up);
 };
&lt;/script&gt;
</code></pre>

Making paths and images draggable in Raphael js

是否有可能使用Raphael在页面周围拖放对象，而不仅仅是圆圈和矩形？我想添加路径和图像，然后你可以到处移动，但它证明是棘手的。我想和拉斐尔一起解决这个问题，因为它支持触摸界面。以下是代码<script> window.onload = function () { var R = Raphael(0...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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