gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 00:50:59 26 4
gpt4 key购买 nike

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

(现在我知道我需要一个数据库等,但那是以后的事情。要事第一。)

我很久以前做过类似的事情,但我不知道如何编辑它才能为这个元素工作:

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

它只是根据光标上的图像工作。一点也不理想,它一直在窃听。

我看过像素艺术的代码,它(某种程度上)完成了需要完成的工作。但不完全是。

像素艺术 fiddle 在这里:

https://jsfiddle.net/bxstmufj/

最佳答案

所以这里是一个人做你想做的事的例子,而不是在 Canvas 的表格网格中。疯狂支持他们把这个放出来: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

在 Canvas 上完成基本绘图之后,他们添加了挑选颜色的功能。请注意他们如何将选取的颜色保存到一个变量中,然后为 Canvas reDraw() 函数调用该变量。

同样的事情也可以用图标来完成。只需为单击的任何图标设置一个 onClick 事件,就像他们对颜色所做的那样(在他们的情况下,他们选择了 mousedown 事件):

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

例如,这是他们放在紫色按钮上的事件处理程序。您可以通过检查元素(按钮)然后右键单击事件处理程序然后转到 mousedown 事件来查看这一点,然后您可以单击此代码所在的 javascript 文件位置。 (所有这些都在 chrome inspect 中完成{右键单击,然后选择 inspect})

现在,如果您不想在 Canvas 上执行此操作,而是想在表格/网格上执行此操作,您要做的就是为单元格设置 onClick 事件。然后他们会调用颜色/图标变量并为该单元格设置它们。

如果您想要网格/表格的示例,请告诉我。 Canvas 是一个更复杂的答案,但我怀疑它是您真正喜欢的。第二个示例及以后的示例正是您想要的,因此您也可以选择要插入的图标。

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>

关于javascript - 当鼠标具有特定类时更改 div 的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55925395/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com