在 "Processing" 中未在鼠标下绘图

Question

我想通过拖动鼠标在一个地方绘制，并在 canvas 中心周围的 3 个位置绘制线条，包括光标本身下方的一个。我正在使用以下代码绘制 3 行，但其中 none 在鼠标光标下：

void setup(){
   size(300, 300); }

void draw() {
  translate(width/2, height/2); 
  if(mousePressed)
    for(int i=0; i<3; i++){
      line(width/2 -mouseX,  height/2 -mouseY, 
           width/2 -pmouseX, height/2 -pmouseY);
      rotate(2*PI/3);  }}

我怎样才能更正此代码，使一张绘图位于鼠标光标的正下方，而另外两张相应地旋转？

Answer 1

您必须考虑与您的 translate() 和 rotate() 通话相关的积分。

首先进行平移，因此原点位于屏幕中央，而不是 upper-left 角。所以你所有的点都需要相对于中心而不是相对于 upper-left 角。

为了调试它，我首先要摆脱 for 循环并简单地绘制一个点或一条线：

void setup() {
  size(300, 300);
}

void draw() {
  translate(width/2, height/2); 
  if (mousePressed) {
    line(width/2 -mouseX,  height/2 -mouseY, 
      width/2 -pmouseX, height/2 -pmouseY);
  }
}

你会看到这是关闭的，这意味着你计算线位置的逻辑是错误的。你可以玩这个来注意一个模式，你可以考虑一些例子点。

中心点是150,150。那么如果鼠标在160,160，我们应该在什么位置画点呢？记住它是相对于 150,150，所以 160,160 变成 10,10.

换句话说，我们从鼠标中减去中心来找出绘制点的位置。

但是你的代码从中心减去鼠标，这是向后的。

如果你以后遇到类似的问题，我强烈建议你通过思考示例点的过程，弄清楚它们应该去哪里。方格纸是你最好的朋友。

注意：我知道你的代码是基于我对的回答，所以这是我的错。我把顺序弄错了，但这在你的另一个问题中并不重要，因为你翻译了 4 次（所以鼠标光标无论如何都被覆盖了）。

在 "Processing" 中未在鼠标下绘图

Not drawing under the mouse in "Processing"

mouse

processing

draw