我试图让我的三角形“鸭嘴”与我的脸的宽度成比例，我该怎么做？

Question

我通过卡恩学院自学，当我改变 X 和 Y 轴时，可以让身体上的三角形移动，但是当我为身体和脸部使椭圆更大时，它不会缩放（我知道椭圆变量需要编辑看起来更圆）三角形在脸上移动。 我尝试将 var BillS 更改为 70/faceW，这可以绕 X 点移动，但仍然不太正确。 我究竟做错了什么？

var bodyX = 221;
var bodyY = 202;
var bodyW = 140;
var faceW = bodyW/2;
var bill = faceW/2;
var billY = bodyY -70;
var billS= (faceW/70);

draw = function() {
    background(207, 254, 255);
    fill(240, 209, 36);
    ellipse(bodyX, bodyY, bodyW, 106); // body?
    ellipse(bodyX, bodyY-70, faceW, 47); // face?
    triangle((bodyX-15)*billS, (billY)*billS, (bodyX + 15)*billS, (billY)*billS, (bodyX)*billS, (billY+20)*billS);
};

Answer 1

http://jsfiddle.net/0w7m3qzj/10/

我添加了更多变量，因此它在 function 调用中没有幻数。 我把它从可汗学院移植到了 js fiddle 和 html canvas。

我认为您遇到的主要问题是图形转换有点时髦。 我喜欢将硬编码值保留在 function 调用之外并给它们命名。

评论是你的朋友。 当你弄清楚一个部分在做什么时，标记它。 空格也很有帮助。

现在三角形全部基于中心点和宽度和高度，它应该更容易缩放和操作。

  var bodyX = 221;
  var bodyY = 202;
  var bodyW = 140;
  var bodyH = 106;
  
  var faceX = bodyX;
  var faceY = bodyY - 70;
  
  var faceW = bodyW/2;
  var faceH = 47;
  var bill = faceW/2;
  var billY = bodyY -70;
  var billS= (faceW/70);
  
  ellipse(ctx, bodyX, bodyY, bodyW, bodyH); // body?
  ellipse(ctx, faceX, faceY, faceW, faceH); // face?
  bill_center_x = faceX;
  bill_center_y = billY + faceH/4;
  bill_height = faceH/2;
  bill_width = faceW/2;
  /* triangle(ctx, 
  (bodyX-15)*billS, (billY)*billS, 
  (bodyX + 15)*billS, (billY)*billS, 
  (bodyX)*billS, (billY+20)*billS); */
    triangle(ctx,
    bill_center_x - bill_width/2,  // left corner of the triangle
    bill_center_y - bill_height/2,

    bill_center_x,                 // bottom center of the triangle
    bill_center_y + bill_height/2,

    bill_center_x + bill_width/2,  // right side of the triangle
    bill_center_y - bill_height/2
  )

请注意，将其移回可汗学院时，请删除triangle和ellipse调用中的ctx参数。