正在处理.js - 当鼠标离开画布时继续交互

Processing.js - Continue interacting when mouse is out of canvas

本文关键字：离开 布时 继续 交互 鼠标 处理 js      更新时间：2023-09-26

我的标题上有一个画布，当用户将鼠标悬停在画布上时，他/她可以与画布进行交互。当鼠标离开画布时，交互停止。当用户浏览网站时，当鼠标在整个文档中移动时，是否可以将交互保持在画布之外。

我正在使用处理.js我不知道编写处理（我没有编写我提供的代码）。我搜索了很多，自己尝试了一下mouseOut()但没有运气。

代码 ：

int factor = 2;
int bufferY = 20;
int bufferX = 10;
void setup()
{
  size(700, 200);
  strokeCap(SQUARE);
}
void draw()
{
  background(255);
  ArrayList<Linus> linus = new ArrayList<Linus>();
  for (int x=0; x<coordsArray.length; x++)
  {
    Linus l = new Linus(coordsArray[x][0]*factor+bufferX, coordsArray[x][1]*factor+bufferY, coordsArray[x][2]*factor+bufferX, coordsArray[x][3]*factor+bufferY);
    linus.add(l);
  }
  for (int x=0; x<coordsArray.length; x++)
  {
    linus.get(x).draw();
  }
}
class Linus
{
  float sX, sY, eX, eY;
  Linus(float _sX, float _sY, float _eX, float _eY) 
  {
    sX = _sX;
    sY = _sY;
    eX = _eX;
    eY = _eY;
  }
  void draw()
  {
    float weight = 1;
    weight = map(mouseX, 0, width, 1, 40);
    strokeWeight(weight);
    line(sX+weight/2, sY, eX+weight/2, eY);
  }
}
float[][] coordsArray =
{
{40 ,0 ,0 ,80},
{43 ,6 ,6 ,80},
{46 ,12 ,42 ,20},
{30 ,44 ,24 ,56 },
{49 ,18 ,45 ,26},
{36 ,44 ,30 ,56 },
{52 ,24 ,48 ,32},
{42 ,44 ,36 ,56 },
{55 ,30 ,51 ,38},
{48 ,44 ,42 ,56 },
{58 ,36 ,48 ,56},
{61 ,42 ,42 ,80},
{88 ,0 ,48 ,80},
{94 ,0 ,54 ,80},
{100 ,0 ,95 ,10},
{78 ,44 ,72 ,56 },
{106 ,0 ,101 ,10},
{84 ,44 ,78 ,56 },
{110 ,4 ,105 ,14},
{90 ,44 ,84 ,56 },
{113 ,10 ,90 ,56},
{116 ,16 ,102 ,44},
{98 ,52 ,93 ,62},
{119 ,22 ,112 ,36},
{102 ,56 ,96 ,68},
{136 ,0 ,133 ,6},
{105 ,62 ,99 ,74},
{142 ,0 ,137 ,10},
{108 ,68 ,102 ,80},
{148 ,0 ,143 ,10},
{111 ,74 ,108 ,80},
{154 ,0 ,149 ,10},
{160 ,0 ,120 ,80},
{166 ,0 ,126 ,80},
{172 ,0 ,167 ,10},
{178 ,0 ,173 ,10},
{184 ,0 ,179 ,10},
{188 ,4 ,185 ,10},
{194 ,4 ,159 ,74},
{202 ,0 ,162 ,80},
{208 ,0 ,203 ,10},
{186 ,44 ,180 ,56},
{173 ,70 ,168 ,80 },
{214 ,0 ,209 ,10},
{192 ,44 ,186 ,56},
{179 ,70 ,174 ,80 },
{220 ,0 ,215 ,10},
{198 ,44 ,192 ,56},
{185 ,70 ,180 ,80 },
{224 ,4 ,221 ,10},
{191 ,70 ,186 ,80},
{197 ,70 ,192 ,80},
{231 ,14 ,205 ,66},
{242 ,4 ,207 ,74},
{250 ,0 ,242 ,16},
{219 ,62 ,210 ,80},
{256 ,0 ,251 ,10},
{221 ,70 ,216 ,80},
{262 ,0 ,257 ,10},
{227 ,70 ,222 ,80},
{268 ,0 ,263 ,10},
{233 ,70 ,228 ,80},
{272 ,4 ,269 ,10},
{239 ,70 ,234 ,80},
{245 ,70 ,242 ,76},
{286 ,0 ,246 ,80},
{292 ,0 ,252 ,80},
{276 ,44 ,270 ,56},
{282 ,44 ,276 ,56},
{288 ,44 ,282 ,56},
{316 ,0 ,276 ,80},
{322 ,0 ,282 ,80}
};

我找到了解决方案。

我把它放在我的 pde 文件中：

window.onmousemove = handleMouseMove;
function handleMouseMove(event) {
event = event || window.event;
mouseX = event.clientX;
mouseY = event.clientY;
}

我必须改变一下在画布上绘图的方式，但至少当我将鼠标移动到画布之外时它会移动。

谢谢！

更新：

我也改变宽度和高度：

width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
相关文章：