Изменить фоновое изображение div, когда мышь имеет определенный класс - PullRequest
Новая
       17

Изменить фоновое изображение div, когда мышь имеет определенный класс

0 голосов
/ 30 апреля 2019

Я создаю интерактивное произведение искусства, с которым люди могут сотрудничать.Что я хочу, так это то, что есть библиотека иконок, которую люди могут использовать.И если щелкнуть по ним, мышь получит класс, и, таким образом, при нажатии на конкретную ячейку в таблице ячейка получит значок в качестве фонового изображения.

(Теперь я знаю, что мне понадобится база данных и т. Д., Но это на потом. Сначала обо всем.)

Я сделал нечто подобное давным-давно, но я не знаю, как это сделать.отредактируйте это, чтобы работать для этого проекта: 

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/

Ответы [ 3 ]

1 голос
/ 02 мая 2019

Исправлена! 

<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;
}
1 голос
/ 02 мая 2019

Итак, вот пример того, как кто-то делает то, что вы хотите, но не в сетке таблицы на холсте.Сумасшедшие опоры для них за то, что они выдают это: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

После основного рисунка на холсте они добавляют возможность выбирать цвета.Обратите внимание, как они сохраняют выбранный цвет в переменную, которая затем вызывается для функции canvas reDraw ().

То же самое можно сделать с помощью значков.Просто наличие события onClick для любого значка, по которому щелкают, как они делали с цветами (в их случае они выбирали событие mousedown): 

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

Это обработчик событий, который они надели на фиолетовую кнопку, например.Вы можете убедиться в этом, проверив элемент (кнопку), затем щелкните правой кнопкой мыши Обработчики событий, затем перейдите к событию mousedown, и затем вы можете нажать на местоположение файла javascript, где находится этот код.(Все это делается в Chrome Inspection {щелкните правой кнопкой мыши, затем выберите 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>
0 голосов
/ 30 апреля 2019

Я не знаю, как использовать класс для установки разных цветов; класс сделал бы вывод, что они все одинаковы. Вы должны использовать идентификаторы для дифференциации. Вы можете передать идентификатор и цвет, на который вы хотите изменить фон, функции и работать так. Или вы можете поместить цвета в массив и использовать индексный номер?

Я сделал базовый пример, используя квадраты в вашей скрипке, чтобы дать идею. Как видите, я назначил только одному из двух фоновое значение с помощью 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>
...