Question

我正在创建一个交互式艺术作品，人们可以在上面进行协作。我想要的是有一个人们可以使用的图标库。当单击它们时，鼠标将获得一个类，因此，当单击表中的特定单元格时，该单元格将获得图标作为其背景图像。

（现在我知道我将需要一个数据库等，但这是以后使用的。首先要做的是。）

很久以前我做了类似的事情，但是我不知道如何编辑它才能用于该项目：

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] + ")";        
  }
}

它仅根据光标上的图像起作用。一点都不理想，它一直困扰着我们。

我已经看过一个像素艺术代码，该代码（有点）做了一件不需要做的事情。但不完全是。

像素艺术在这里摆弄：

https://jsfiddle.net/bxstmufj/

Answer 1

已修复！

<div id="p1" class="pen"></div>
<div id="p2" class="pen"></div>


  <div id="art">
    <div class="row">
      <div class="pixel"></div>
      <div class="pixel"></div>
  </div>
</div>


icon = '(icon.png)'

$('#p1').click(function (){
    icon = "icon2.png";
    alert(icon);
});


$('#p2').click(function (){
    icon = "icon3.png";
    alert(icon);
});


// onclick function classes 
  $(".pixel").click(function() {
        //function that changes background to url
    // $(this).css('background-image', var(icon));
    // $(this).css("background-image", "url(" + icon")");
    $(this).css("background-image", "url(" +icon +")");
});

#art {
  display: table;
  border-spacing: 1px;
  background-color: black;
  border: 1px solid black;
}

.row {
  display: table-row;
}

.pixel {
  display: table-cell;
  background-color: white;
  width: 25px;
  margin: 1px;
  height: 25px;
  background-size: contain;
}

.pen {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 2px solid black;
}

Answer 2

因此，这里有一个示例，该示例显示某人正在执行您想要的操作，而不是在画布中的表格网格中。疯狂的道具向他们展示： http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

在画布上进行基本绘画后，他们添加了选择颜色的功能。请注意，他们如何将选择的颜色保存到一个变量中，然后该变量将被画布的reDraw（）函数调用。

使用图标可以完成相同的操作。只需为单击的任何图标设置一个onClick事件，就像它们对颜色一样（在这种情况下，他们选择mousedown事件）：

$('#choosePurpleSimpleColors').mousedown(function(e){
    curColor_simpleColors = colorPurple;
});

例如，这是他们放置在紫色按钮上的事件处理程序。您可以通过检查元素（按钮）来查看此内容，然后右键单击“事件处理程序”，然后转到mousedown事件，然后单击此代码所在的javascript文件位置。（所有这些操作均在chrome inspect中完成{右键单击，然后选择inspect}）

现在，如果您不想在画布上执行此操作，而是在表格/网格上执行操作，则只需为单元格设置onClick事件。然后，他们将调用color / icon变量并为该单元格设置它们。

让我知道您是否想要表格/表格的示例。画布是一个更复杂的答案，但我怀疑这是您真正喜欢的。第二个示例以及以后的示例确实是您想要的，因此您还可以选择要插入的图标。

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>

Answer 3

我不知道使用类设置各种颜色；一个班级会推断他们都是一样的。您必须使用ID进行区分。您可以将想要将背景更改为功能的id和颜色传递给该函数并以这种方式工作。或者您可能选择将颜色放入数组中并使用索引号？

我用您的小提琴中的正方形作了一个基本的例子，以给出一个想法。如您所见，我仅使用css分配了两个背景值之一。当然，如果您要使用图像而不是颜色，则可以对该功能进行调整以更改背景图像。

希望这会有所帮助

function setPenColour(id, pixel) {
  var myDiv = document.getElementById(id);
  myDiv.style.backgroundColor = pixel;
}

#p1 {
  background-color: grey;
}

#art {
  display: table;
  border-spacing: 1px;
  background-color: black;
  border: 1px solid black;
}

.row {
  display: table-row;
}

.pixel {
  display: table-cell;
  background-color: white;
  width: 25px;
  margin: 1px;
  height: 25px;
}

.pen {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 2px solid black;
}

<div id="p1" class="pen" onclick="setPenColour(id, '#00FF00')" ;></div>
<div id="p2" class="pen" style="background-color:blue;" onclick="setPenColour(id, 'red')"></div>

鼠标具有特定类别时更改div的背景图像

3 个答案: