I am looking for a way to display multiple images when the user clicks a button. It needs to be done

Question

I am looking for a way to display multiple images when the user clicks a button. It needs to be done

After successfully implementing a draggable single circle image when clicking a button, I am now looking to add multiple circle images each time the button is clicked.

I'm considering using the append function with the canvas tag for this purpose. Can someone help me understand how to implement this?

<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>

jquery jquery-ui css html5-canvas

Answer 1

Answer №1

Here's a starting point that I came up with, although it may not fully meet your requirements: 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();
    }
}

Answer 2

Here's a starting point that I came up with, although it may not fully meet your requirements: 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();
    }
}

I am looking for a way to display multiple images when the user clicks a button. It needs to be done

Answer №1

Similar questions

How can I include a close/ok button at the bottom of a bootstrap multiselect component?

Modify the row's background color after clicking the delete button with jquery

Should the max-height transition be set from 0 to automatically adjust or to none?

Rails implementation of a star-based rating system

Fade out at varying speeds

Struggled to Find a Solution for Code Alignment

Exploring the integration of HTML and CSS within the Django framework

The lightbox feature on the page is not functioning properly

Sizing labels for responsive bar charts with chart.js

How can I make a basic alert box close after the initial click?

What is the best way to include two class names within a single div using Next.js?

Designing HTML columns to adapt to different screen resolutions

Unable to retrieve next jQuery parent element

Is there a way to display a bootstrap modal when the page is refreshed?

embed animated text in a div element on an HTML page

How to eliminate looping animations with jQuery

Concealing a div based on a condition

Styling the ::selection inline with CSS allows for custom

Incorporating a jQuery feature into Angular 6

Troubles with double borders in HTML's opaque border feature