Java 无法同时使用jquery和raphael在画布上绘制
我能够使用jquery绘制线条，但当与raphael结合创建svg元素时，我失去了基于鼠标移动绘制的功能 这是普朗克： 代码：Java 无法同时使用jquery和raphael在画布上绘制,java,jquery,svg,raphael,jquery-svg,Java,Jquery,Svg,Raphael,Jquery Svg,我能够使用jquery绘制线条，但当与raphael结合创建svg元素时，我失去了基于鼠标移动绘制的功能 这是普朗克： 代码： 编辑 window.onload=函数（） { var纸张=新拉斐尔（拉斐尔（“容器”、“100%””、“100%”）； var边栏=paper.rect（0,43.5,69,620）； var rect=paper.rect（10,50,51,41,5）.attr（{stroke:'6DAACA'，'stroke width'：1，fill:'D6F2FC'）； v
编辑
window.onload=函数（）
{
var纸张=新拉斐尔（拉斐尔（“容器”、“100%””、“100%”）；
var边栏=paper.rect（0,43.5,69,620）；
var rect=paper.rect（10,50,51,41,5）.attr（{stroke:'6DAACA'，'stroke width'：1，fill:'D6F2FC'）；
var circle1=paper.circle（35,145,25）.attr（{fill:'#fff'，笔划宽度：2，笔划：'#399324'}）；
var circle2=paper.circle（35,225,25）.attr（{fill:'#fff'，笔划宽度：4，笔划：'#9E2F3C'）；
var circle3=paper.circle（35310,25）.attr（{fill:'#fff'，笔划宽度：4，笔划：'#D5C096'}）；
var Customrect=paper.path（“M25 370 L10 370 L10 411 L25 411 L25 370 L61 370 L61 411 L25 411”）；
//圆滚轧
纸套（圈1）；
var clone_handler=函数（）{
var x=this.clone（）；
x、 拖动（移动、启动、向上）；
};
变量开始=函数（x、y、事件）{
this.ox=this.attr（“cx”）；
this.oy=this.attr（“cy”）；
},
移动=功能（dx，dy）{
这个是.attr({
cx:this.ox+dx，
西：这个
});
},
up=函数（）{
这是动画({
r:20，
不透明度：.8
}, 500, ">");
};
圆圈1.鼠标移动（克隆处理器）；
圆圈2.鼠标移动（克隆处理器）；
圆圈3.鼠标移动（克隆处理器）；
//线描
var canvas=$（“#canvas”）；
var paper=Raphael（canvas.attr（'id'）、canvas.width（）、canvas.height（））；
var mouseDownX=0；
var mouseDownY=0；
变电舔；
var-shap；
var borderColor='#093'；
var fillColor='#fff'；
var shapOpacity=.0；
$（文档）.ready（函数（）{
$（“#画布”）。单击（函数（e）{
重置（）；
$（画布）.mousedown（函数（e）{
e、 originalEvent.preventDefault（）；
var offset=$（canvas.offset（）；
mouseDownX=e.pageX-offset.left；
mouseDownY=e.pageY-offset.top；
形状=抽绳（mouseDownX，mouseDownY，mouseDownX，mouseDownY）；
$（画布）.mousemove（函数（e）{
var offset=$（canvas.offset（）；
var upX=e.pageX-offset.left；
var upY=e.pageY-offset.top；
变量宽度=upX-鼠标向下移动；
变量高度=upY-鼠标向下；
形状更新（upX，upY）；
})；//鼠标放下。
})；//鼠标放下。
$（画布）.mouseup（函数（e）{
$（画布）.unbind（'mousemove'）；
})//结束鼠标。
})；//结束文档准备就绪。
//
$（“#清除”）。单击（功能（e）{
$（画布）.find（'rect，circle，path'）。每个（函数（i，obj）{
$（this.remove（）；
});
});
var start=函数（）{
this.ox=this.attr（“x”）；
this.oy=this.attr（“y”）；
这个是.attr({
不透明度：形状不透明度
});
this.ow=this.attr（'width'）；
this.oh=this.attr（‘高度’）；
}
变量移动=函数（dx，dy）{
nowX=Math.min（paper.width，this.ox+dx）；
nowY=Math.min（paper.height，this.oy+dy）；
nowX=Math.max（0，nowX）；
nowY=Math.max（0，nowY）；
这个是.attr({
x:现在，
y:现在
});
if（this.attr（“fill”）！=fillColor）
这个是.attr({
填充：填充颜色
});
}
var up=函数（）{
这个是.attr({
不透明度：形状不透明度
});
if（this.attr（“y”）<60和this.attr（“x”）<60）
这个是.attr({
填充：填充颜色
});
};
变量重置=函数（）{
$（画布）.unbind（'mousedown'）；
$（画布）.unbind（'mousemove'）；
$（画布）.unbind（'mouseup'）；
}
功能抽绳（startX、startY、endX、endY）{
变量开始={
x:startX，
y:斯塔蒂
};
变量结束={
x:endX，
y:
<!doctype html>
<html>
<head>
<title>Editor</title>
<meta http-equiv="x-ua-compatible" content="ie=9"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/connector.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
window.onload = function ()
{
var paper = new Raphael(Raphael("container", "100%", "100%"));
var sidebar = paper.rect(0, 43.5, 69, 620);
var rect = paper.rect(10, 50, 51, 41, 5).attr({stroke: '#6DAACA', 'stroke-width': 1, fill: '#D6F2FC'});
var circle1 = paper.circle(35, 145, 25).attr({fill: '#fff', 'stroke-width': 2, stroke: '#399324'});
var circle2 = paper.circle(35, 225, 25).attr({fill: '#fff', 'stroke-width': 4, stroke: '#9E2F3C'});
var circle3 = paper.circle(35, 310, 25).attr({fill: '#fff', 'stroke-width': 4, stroke: '#D5C096'});
var Customrect = paper.path("M25 370 L10 370 L10 411 L25 411 L25 370 L61 370 L61 411 L25 411");
// circle clonning
paper.set(circle1);
var clone_handler = function () {
var x = this.clone();
x.drag(move, start, up);
};
var start = function (x, y, event) {
this.ox = this.attr("cx");
this.oy = this.attr("cy");
},
move = function (dx, dy) {
this.attr({
cx: this.ox + dx,
cy: this.oy + dy
});
},
up = function () {
this.animate({
r: 20,
opacity: .8
}, 500, ">");
};
circle1.mousemove(clone_handler);
circle2.mousemove(clone_handler);
circle3.mousemove(clone_handler);
//Line Drawing
var canvas = $('#canvas');
var paper = Raphael(canvas.attr('id'), canvas.width(), canvas.height());
var mouseDownX = 0;
var mouseDownY = 0;
var elemClicked;
var shap;
var borderColor = '#093';
var fillColor = '#fff';
var shapOpacity = .0;
$(document).ready(function () {
$("#canvas").click(function (e) {
reset();
$(canvas).mousedown(function (e) {
e.originalEvent.preventDefault();
var offset = $(canvas).offset();
mouseDownX = e.pageX - offset.left;
mouseDownY = e.pageY - offset.top;
shap = drawLine(mouseDownX, mouseDownY, mouseDownX, mouseDownY);
$(canvas).mousemove(function (e) {
var offset = $(canvas).offset();
var upX = e.pageX - offset.left;
var upY = e.pageY - offset.top;
var width = upX - mouseDownX;
var height = upY - mouseDownY;
shap.updateEnd(upX, upY);
}); // end mouse down.
});// end mouse down.
$(canvas).mouseup(function (e) {
$(canvas).unbind('mousemove');
}); // end mouse up.
}); // end document ready.
//
$("#clear").click(function (e) {
$(canvas).find('rect, circle, path').each(function (i, obj) {
$(this).remove();
});
});
var start = function () {
this.ox = this.attr("x");
this.oy = this.attr("y");
this.attr({
opacity: shapOpacity
});
this.ow = this.attr('width');
this.oh = this.attr('height');
}
var move = function (dx, dy) {
nowX = Math.min(paper.width, this.ox + dx);
nowY = Math.min(paper.height, this.oy + dy);
nowX = Math.max(0, nowX);
nowY = Math.max(0, nowY);
this.attr({
x: nowX,
y: nowY
});
if (this.attr("fill") != fillColor)
this.attr({
fill: fillColor
});
}
var up = function () {
this.attr({
opacity: shapOpacity
});
if (this.attr("y") < 60 && this.attr("x") < 60)
this.attr({
fill: fillColor
});
};
var reset = function () {
$(canvas).unbind('mousedown');
$(canvas).unbind('mousemove');
$(canvas).unbind('mouseup');
}
function drawLine(startX, startY, endX, endY) {
var start = {
x: startX,
y: startY
};
var end = {
x: endX,
y: endY
};
var getPath = function () {
return "M" + start.x + " " + start.y + " L" + end.x + " " + end.y;
};
var redraw = function () {
node.attr("path", getPath());
node.attr({
stroke: borderColor
});
}
var node = paper.path(getPath());
$(node.node).attr('id', 'shap' + startX + startY);
node.click(function (e) {
elemClicked = $(node.node).attr('id');
});
return {
updateStart: function (x, y) {
start.x = x;
start.y = y;
redraw();
return this;
},
updateEnd: function (x, y) {
end.x = x;
end.y = y;
redraw();
return this;
}
};
}
;
});
};
</script>
</head>
<body>
<div id="container">
<div id="header" style="margin-bottom: 0;">
<div id="footer"></div>
</div>
</div>
<div class="controls">
</div>
<div class="dvcls" id="canvas"></div>
</body>
</html>