0

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

我正在使用 processing.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}
};
4

1 回答 1

1

我找到了解决方案。

我把它放在我的 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;
于 2013-11-28T21:30:16.830 回答