使路线和图像在拉斐尔js可以拖拉 [英] Making paths and images draggable in Raphael js
本文介绍了使路线和图像在拉斐尔js可以拖拉的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
是否可以使用Raphael js在页面之外拖放除了圆圈和矩形之外的对象?
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.
这里是代码
<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>
推荐答案
这里(我发现)的关键是转换x和y三角形转换为路径对象理解的值。
The key here (that I found) is to convert the x and y deltas into translate values, which the path object understands.
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);
这篇关于使路线和图像在拉斐尔js可以拖拉的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文