问题描述
||
单击按钮时,我需要获取多个圆形图像。我只用一张图像就做到了,那也是可拖动的。
但我需要每个用户单击按钮的多个图像。
我们应该使用append函数来做到这一点。我在使用画布标签。如果是这样,我们如何实现这一目标。
<script>
$(document).ready(function() {
$(\'#pink-circle-button\').click(function() {
$(\'#currentCircle\').show();
});
});
$(function() {
$( \"#currentCircle\" ).draggable();
});
$(document).ready(function(){
$(\"button#pink-circle-button\").click(function(){
$(\"p\").append(\"<canvas id=\'currentCircle\' class=\'drawCircle\'/>\");
});
});
</script>
<style>
.drawCircle{border: 2px solid rgb(255,255);background-color:black; position: fixed; display: none; top: 97px; left: 572px; width: 153px; height: 150px; border-radius: 76.5px 76.5px 76.5px 76.5px;}
</style>
<canvas id=\"currentCircle\" class=\'drawCircle\'/></canvas>
解决方法
据我所知,我编造的内容无法满足您的需求,但这可能是一个开始:http://jsfiddle.net/eGjak/2/。
var ctx = $(\'#cv\').get(0).getContext(\'2d\');
$(\'body\').bind(\'selectstart\',function() {return false});
var Circle = function() {
this.x = Math.random() * 400;
this.y = Math.random() * 400;
this.c = \'rgb(\' + Math.floor(Math.random() * 256) + \',\' +
Math.floor(Math.random() * 256) + \',\' +
Math.floor(Math.random() * 256) + \')\';
};
var circles = [];
function d(xp,yp,x,y) {
return Math.sqrt((x-xp)*(x-xp) + (y-yp)*(y-yp));
}
$(\'button\').click(function() {
circles.push(new Circle);
render();
});
var currindex = -1;
$(\'#cv\').mousedown(function(e) {
bx = e.offsetX,by = e.offsetY;
for(var i = 0; i < circles.length; i++) {
if(d(circles[i].x,circles[i].y,e.offsetX,e.offsetY) < 50) {
currindex = i;
tx = circles[i].x;
ty = circles[i].y;
}
}
});
var bx = 0,by = 0,tx = 0,ty = 0;
$(\'#cv\').mouseup(function(e) {
currindex = -1;
});
$(\'#cv\').mousemove(function(e) {
if(currindex > -1) {
circles[currindex].x = tx + (e.offsetX - bx);
circles[currindex].y = ty + (e.offsetY - by);
}
render();
});
function render() {
ctx.clearRect(0,400,400);
for(var i = 0; i < circles.length; i++) {
ctx.beginPath();
ctx.arc(circles[i].x,50,Math.PI*2);
ctx.fillStyle = circles[i].c;
ctx.fill();
}
}