-1

ボタンをクリックしたときに複数の円の画像を取得する必要があります。私はそれを単一の画像で行いましたが、それもドラッグ可能な画像です。

しかし、ユーザーがボタンをクリックするたびに複数の画像が必要です。

追加機能でそれを行いましょうか。その中でキャンバスタグを使用しています。もしそうなら、どうすればそれを実装できますか。

<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, 0, 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>
4

1 に答える 1

0

私が知る限り、あなたのニーズを満たさないものを作りましたが、それはスタートかもしれません: 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, 0, 400, 400);
    for(var i = 0; i < circles.length; i++) {
        ctx.beginPath();
        ctx.arc(circles[i].x, circles[i].y, 50, 0, Math.PI*2);
        ctx.fillStyle = circles[i].c;
        ctx.fill();
    }
}
于 2011-05-31T13:53:12.150 に答える