I'm creating an interactive art piece, which people can collaborate on. What I want is that there is a library of icons people can use. And when clicking on them, the mouse gets a class and thus when clicking on a specific cell in the table, the cell will get the icon as their background image.
(Now I know I will need a database etc, but that's for later. First things first.)
I did something similar a long time ago, but I don't know how to edit this in order to work for this project:
function nextPic() {
if ( $('html,body').css('cursor').indexOf('cursor2.png') > 0 )
{
counter += 1;
if (counter > myPictures.length - 1) {
// counter = 0;
}
else {
element.style.backgroundImage = "url(" + myPictures[counter] + ")";
}
}
It just works according to the image on the cursor. Not ideal at all, it bugged ALL the time.
I've looked at a code for pixel art, which (kind of) does what needs t one done. But not quite.
The pixel art fiddle here:
So here is an example of someone doing what you want but instead of in a table grid in a canvas. Mad props to them for putting this out: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/
After the basic drawing on a canvas they add the ability to pick colors. Notice how they save the picked color into a variable that is then called on for the canvas reDraw() function.
The same thing can be done with icons. Simply having an onClick event for whatever icon is clicked just like they did with colors (in their case they chose mousedown event):
$('#choosePurpleSimpleColors').mousedown(function(e){
curColor_simpleColors = colorPurple;
});
That is the event handler they put on the purple button for example. You can see this by inspecting the element (button) then on the right click Event Handlers then go to the mousedown event and then you can click on the javascript file location where this code is. (All of this done in chrome inspect{right click, then pick inspect})
Now if you did not want to do it on a canvas but instead a a table/grid all you would do is set onClick events for the cells. They would then call on the color/icon variable and set them for that cell.
Let me know if you would like an example for a grid/table. The canvas is a bit more of a complex answer but I suspect it is what you really prefer. The second example and beyond is really what you want so you could also pick icons to insert.
context = document.getElementById('canvas').getContext("2d");
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mousemove(function(e){
if(paint){
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
redraw();
}
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas" width="490" height="220" style="border: solid 1px black;"></canvas>