你好，我是使用 raphael javascript 库的新手，我正在尝试创建一个简单的拖放；为了能够将克隆形状从 Canvas 外部拖动到 Canvas R 中，并且如果用户单击它，我希望能够删除所选克隆(用户在所选克隆上按删除键，克隆将被删除)我也想复制克隆并粘贴它。这是我的代码:
<html>
<head>
<title>Raphael Play</title>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="jquery.contextMenu.r2.js"></script>
<style type="text/css">
#canvas_container {
width: 500px;
border: 1px solid #aaa;
}
</style>
<script>
window.onload = function() {
var nowX, nowY, w = 500, h=400, r=30, R = Raphael("canvas_container", w, h),
c = R.circle(100, 100, r).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5,
cursor: "move"
});
var clone=c.clone();
var start = function () {
// storing original coordinates
this.ox = this.attr("cx");
this.oy = this.attr("cy");
this.attr({opacity: 1});
},
move = function (dx, dy) {
// move will be called with dx and dy
// restrict movement of circle to within boundaries
if (this.ox + dx <= w - r &&
this.oy + dy <= h - r &&
this.ox + dx >= 0 + r &&
this.oy + dy >= 0 + r)
{
this.attr({cx: this.ox + dx, cy: this.oy + dy});
} // else nothing
},
up = function () {
// restoring state
this.attr({opacity: .5});
};
clone.drag(move, start, up);
};
// Create Context Menu
</script>
</head>
<body>
<div id="canvas_container"></div>
</body>
最佳答案
每个拉斐尔形状都需要在 Canvas 内；它不可能在外面。您将需要使 Canvas 填充更大的区域以包含其他形状，也许需要借助样式。我不确定拥有多个拉斐尔 Canvas 是否效果很好，因为您需要使用其他形状的属性在另一个 Canvas 内创建一个新的拉斐尔形状。你可以做，但我不会做。另外，在使用带有 JavaScript 事件的删除按钮时要小心，因为浏览器使用它进行导航。
关于javascript - 与拉斐尔一起拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4602115/