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

【问题标题】：How to transform a ellipse to a rect in Javascript如何在Javascript中将椭圆转换为矩形
【发布时间】：2019-12-19 09:00:59
【问题描述】：

因此，如果按下特定键，我正在尝试编写一个形状转换为另一个形状的东西。到目前为止，我被困在第一个形状上。我该如何写，我的“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);
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"&gt;&lt;/script&gt;

【问题讨论】：

按键监听器在哪里
使用p5，所以keyTyped是监听器

标签： javascript function key p5.js

【解决方案1】：

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

删除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() 中使用的一个单词（又名字符串），以调用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);
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

您可以使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);
}

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"&gt;&lt;/script&gt;

【讨论】：