如何在 Javascript 中将椭圆转换为矩形

Question

所以我正在尝试编写一些代码，如果按下特定的键，形状会转换为另一个形状。到目前为止，我停留在第一个形状。我怎么写，我的 "var musculus" 更改为 keyTyped 上的功能屈肌或伸肌？

var musculus;

function draw() {
  musculus = ellipse(30, 30, 20, 20);

  function keyTyped() {
    if (key === 'a') {
      musculus = flexor;
    } else if (key === 'b') {
      musculus = extensor;
    }
  }
}

function flexor() {
  ellipse(56, 46, 55, 55);
}

function extensor() {
  square(30, 20, 55, 20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 1

您可以使 musculus 成为自己的函数，您可以调用该函数来绘制圆圈。然后您可以使用一个名为 currentShape 的全局变量，它存储对您要绘制的当前形状的引用（即绘制椭圆的函数）。当你想改变你的形状时（在 keyPress 中）你可以这样做重新分配 currentShape 设置为一个新的函数，它将绘制一个新的形状。

另请注意，在 p5js 中，您的 keyTyped() 函数应位于任何其他函数之外。

var currentShape = musculus;
function draw() {
  background(255); // draw background (remove any previously drawn shapes)
  currentShape();
}

function keyTyped() {
  if (key === 'a') {
    currentShape = flexor;
  } else if (key === 'b') {
    currentShape = extensor;
  }
}

function musculus() {
  ellipse(30, 30, 20, 20);
}

function flexor() {
  ellipse(56, 46, 55, 55);
}

function extensor() {
  square(30, 20, 55, 20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

Answer 2

您的代码即将生效，只需进行一些更改。

删除draw()中的行musculus = ellipse(30, 30, 20, 20);。
Draw 是每帧运行，所以 musculus 一直设置为 ellipse(30, 30, 20, 20)
musculus 已设置但从未使用，将 musculus; 添加到 draw() 以便在每个帧上使用它。
将 keyTyped() 移到 draw() 之外，以便 P5js 可以看到并使用它。
keyTypes() 是正确的，但您需要将 musculus 设置为函数，而不仅仅是函数名称。只需将 () 添加到每个函数名称即可。 IE。 musculus = flexor();

您肯定可以对此脚本进行很多改进，但您已经有了一个良好的开端。
固定码

var musculus;

function draw() {
  musculus;
}

function keyTyped() {
  if (key === 'a') {
    musculus = flexor();
  } else if (key === 'b') {
    musculus = extensor();
  }
}

function flexor() {
  ellipse(56, 46, 55, 55);
}

function extensor() {
  square(30, 20, 55, 20);
}

更好地修复
在我的重写中，我将 musculus 的值设置为在 draw() 中使用的单词（aka.string）以调用 if statement 中的相应函数。我还使用 background('white') 在绘制新框架之前清除屏幕。

var musculus;
    
function draw() {
  background(255);
  if (musculus === 'flexor') {
    flexor();
  } else if (musculus === 'extensor') {
    extensor();
  }
}
    
function keyTyped() {
  if (key === 'a') {
    musculus = 'flexor';
  } else if (key === 'b') {
    musculus = 'extensor';
  }
}
    
function flexor() {
  ellipse(56, 46, 55, 55);
}

function extensor() {
  square(30, 20, 55, 20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>

如何在 Javascript 中将椭圆转换为矩形

How to transform a ellipse to a rect in Javascript

javascript

key

function

p5.js