将多（移至）命令转换为简单（x，y）答案

【问题标题】：Converting multi (move-to) commands to simple (x,y)将多（移至）命令转换为简单（x，y）
【发布时间】：2015-12-15 01:02:51
【问题描述】：

编辑:: 我已经按照我的意愿将各个点转换为 (x,y)。我将名称从 bolt 更改为 drop，因为我已经有一个名为 drop 的既定形状。但是，它不会在画布上绘制。我用我也绘制并转换为（x，y）的叶子形状替换了坐标，它工作得很好。我不知道我的螺栓形状有什么不同。

context.beginPath();
context.moveTo(drop.x,drop.y);
context.moveTo(drop.x+140,drop.y+28);
context.lineTo(drop.x+24,drop.y+28);
context.moveTo(drop.x+24,drop.y+28);
context.lineTo(drop.x-2,drop.y+25);
context.moveTo(drop.x-2,drop.y+25);
context.lineTo(drop.x+17,drop.y+25);
context.moveTo(drop.x+17,drop.y+25);
context.lineTo(drop.x-18,drop.y+53);
context.moveTo(drop.x-18,drop.y+53);
context.lineTo(drop.x-3,drop.y+54);
context.moveTo(drop.x-3,drop.y+54);
context.lineTo(drop.x-47,drop.y+77);
context.moveTo(drop.x-47,drop.y+77);
context.lineTo(drop.x-31,drop.y+59);
context.moveTo(drop.x-31,drop.y+59);
context.lineTo(drop.x-40,drop.y+59);
context.moveTo(drop.x-40,drop.y+59);
context.lineTo(drop.x-14,drop.y+33);
context.moveTo(drop.x-14,drop.y+33);
context.lineTo(drop.x-30,drop.y+32);
context.moveTo(drop.x-30,drop.y+32);
context.lineTo(drop.x+140,drop.y+28);
context.closePath();
context.fillStyle = 'yellow';
context.fill();

我不确定我想要做什么。这是我的教授为云提供的代码。

function drawCloud(cloud) {
     context.beginPath();
     context.moveTo(cloud.x, cloud.y);
     context.bezierCurveTo(cloud.x-40, cloud.y+20, cloud.x-40, cloud.y+70, cloud.x+60, cloud.y+70);
     context.bezierCurveTo(cloud.x+80, cloud.y+100, cloud.x+170, cloud.y+100, cloud.x+170, cloud.y+70);
     context.bezierCurveTo(cloud.x+250, cloud.y+70, cloud.x+250, cloud.y+40, cloud.x+210, cloud.y+20);
     context.bezierCurveTo(cloud.x+260, cloud.y-40, cloud.x+200, cloud.y+50, cloud.x+170, cloud.y-30);
     context.bezierCurveTo(cloud.x+150, cloud.y-75, cloud.x+80, cloud.y-60, cloud.x+80, cloud.y-30);
     context.bezierCurveTo(cloud.x+30, cloud.y-75, cloud.x-20, cloud.y-60, cloud.x, cloud.y);

     // complete custom shape
     context.closePath();
     context.lineWidth = 5;
     context.strokeStyle = cloud.color;
     context.stroke();
  }

我找到了形状生成器并制作了这个形状

function drawBolt(bolt){
    context.beginPath()
    context.moveTo(140,28);
    context.lineTo(164,28);
    context.moveTo(164,28);
    context.lineTo(138,53);
    context.moveTo(138,53);
    context.lineTo(157,53);
    context.moveTo(157,53);
    context.lineTo(122,81);
    context.moveTo(122,81);
    context.lineTo(137,82);
    context.moveTo(137,82);
    context.lineTo(93,105);
    context.moveTo(93,105);
    context.lineTo(109,87);
    context.moveTo(109,87);
    context.lineTo(100,87);
    context.moveTo(100,87);
    context.moveTo(126,61);
    context.lineTo(110,60);
    context.moveTo(110,60);
    context.lineTo(140,28);
    context.closePath();
    context.fill();
};

她告诉我，我必须将这些点更改为 x,y，我想这涉及到数学？有没有简单的方法来做到这一点？

那么她有多少 (cloud.x-40) 我想我需要 bolt.x(?)

一个好的起点在哪里？

  var canvas;
  var context;
  var shapes = []
  var timer;
  var timerTwo;
  var possibleShapes = ['drop','triangle','square','circle','cloud'];
  function Shape(x, y, color) {
    this.x = x;
    this.y = y;
    this.size = Math.random()*20+5;
    this.dx = Math.random()*4-2;
    this.dy = Math.random()*4-2;
    this.color = color;
    this.shape = possibleShapes[Math.floor(Math.random()*possibleShapes.length)];
  }
  function init() {
    canvas = document.getElementById('canvas');
    context = canvas.getContext("2d");

    window.addEventListener('resize', resizeCanvas, false);
    window.addEventListener('orientationchange', resizeCanvas, false);
    resizeCanvas();
    canvas.onclick = function(event) {
        handleClick(event.clientX, event.clientY);
    };
    timer = setInterval(resizeCanvas, 20);
    timerTwo = setInterval(newShape, 200);
  }
  function newShape() {
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var colors = ["red", "green", "blue", "orange", "purple", "yellow"];
    var color = colors[Math.floor(Math.random()*colors.length)];
    shapes.push(new Shape(x, y, color));

  }
  function drawCircle(circle) {
     context.beginPath();
     context.arc(circle.x, circle.y, circle.size, 0, degreesToRadians(360), true);
     context.fillStyle = circle.color;
     context.fill();
  }
  function drawSquare(square) {
    context.beginPath();
    context.fillStyle = square.color;
    context.fillRect(square.x, square.y, square.size, square.size);
  }  
  function drawTriangle(triangle) {
    context.beginPath();
    context.fillStyle = triangle.color;
    context.moveTo(triangle.x+triangle.size,triangle.y);
    context.lineTo(triangle.x,triangle.y);
    context.lineTo(triangle.x,triangle.y+triangle.size);
    context.closePath();
    context.fill();
  }

  function drawCloud(cloud) {
     context.beginPath();
     context.moveTo(cloud.x, cloud.y);
     context.bezierCurveTo(cloud.x-40, cloud.y+20, cloud.x-40, cloud.y+70, cloud.x+60, cloud.y+70);
      context.bezierCurveTo(cloud.x+80, cloud.y+100, cloud.x+170, cloud.y+100, cloud.x+170, cloud.y+70);
      context.bezierCurveTo(cloud.x+250, cloud.y+70, cloud.x+250, cloud.y+40, cloud.x+210, cloud.y+20);
      context.bezierCurveTo(cloud.x+260, cloud.y-40, cloud.x+200, cloud.y+50, cloud.x+170, cloud.y-30);
      context.bezierCurveTo(cloud.x+150, cloud.y-75, cloud.x+80, cloud.y-60, cloud.x+80, cloud.y-30);
      context.bezierCurveTo(cloud.x+30, cloud.y-75, cloud.x-20, cloud.y-60, cloud.x, cloud.y);

      // complete custom shape
      context.closePath();
      context.lineWidth = 5;
      context.strokeStyle = cloud.color;
      context.stroke();
  }

  function drawDrop(drop) {
        context.beginPath();
        context.lineJoin = 'miter';
        context.moveTo(drop.x, drop.y);
        context.arc(drop.x, drop.y+68, 34.5, 5.75, 3.66, false);
        context.quadraticCurveTo(drop.x-3.5, drop.y+15, drop.x, drop.y);
        context.closePath();
        context.lineWidth = 2;
        context.fillStyle = drop.color;
        context.fill();
  }
  function drawText() {
    context.fillStyle = 'white';
    context.font = 'bold 2em sans-serif';
    context.textAlign = 'right';
    context.fillText('Art?', canvas.width-40, canvas.height-40);
}
  function resizeCanvas() {
    canvas.width = window.innerWidth-20;
    canvas.height = window.innerHeight-20;
    fillBackgroundColor();
    for (var i=0; i<shapes.length; i++) {
        if (shapes[i].shape == 'square') {
            drawSquare(shapes[i]);
        } else if (shapes[i].shape == 'circle') {
            drawCircle(shapes[i]);
        } else if (shapes[i].shape == 'triangle') {
            drawTriangle(shapes[i]);
        } else if (shapes[i].shape == 'drop') {
            drawDrop(shapes[i]);
        } else if (shapes[i].shape == 'cloud') {
            drawCloud(shapes[i]);
        }
        if (shapes[i].x + shapes[i].dx > canvas.width || shapes[i].x + shapes[i].dx < 0)
            shapes[i].dx = -shapes[i].dx;
        if (shapes[i].y + shapes[i].dy > canvas.height || shapes[i].y + shapes[i].dy < 0)
            shapes[i].dy = -shapes[i].dy;
            shapes[i].x += shapes[i].dx;
            shapes[i].y += shapes[i].dy;
    }
    drawText();      
  }
  function fillBackgroundColor() {
     //var colors = ["white", "yellow", "blue", "red"];
     //var bgColor = colors[Math.floor(Math.random() * colors.length)];
     context.fillStyle = 'black';
     context.fillRect(0, 0, canvas.width, canvas.height);
}
function degreesToRadians(degrees) {
    //converts from degrees to radians and returns
    return (degrees * Math.PI)/180;
}
window.onload = init;

【问题讨论】：

你的解决方案的问题是它是硬编码的，因此是静态的：它总是在同一个位置，如果你需要移动你的云，那会很痛苦。你教授告诉你的是使用一个变量来保存你的形状的x，y坐标，所以它可以改变。所以如果你的形状是为 x = 0 和 y = 0 制作的，你只需要做 context.moveTo(x+140,y+28); 等。
我相信我的困惑来自她编辑云的解决方案？她“解除”了这段代码（stackoverflow.com/questions/19541192/…）并自己制作了坐标，我想我正试图弄清楚是否存在等式，因为我仍然感到困惑。我要联系她。
我发现将所有坐标归一化为零很容易，然后我可以将螺栓路径视为图像。通过向每个坐标添加 offsetX 和 offsetY，可以像图像一样重新定位螺栓路径。 F.ex: minX 是 93 而 minY 是 28 所以 .moveTo( 140-93, 28-28 ) 变成 .moveTo( x+47,y+0 ) 然后你可以用 x= 将螺栓移动到 [75,50] 75 & y = 50。顺便说一句，你不需要在第一个之后的所有 .moveTo 以及你最后几个 moveTo 和 lineTo 是相同的，所以你什么都没有画。

标签： html html5-canvas coordinates shapes

【解决方案1】：

您可以翻译整个画布而不是修改您的代码。假设 bolt 是一个以 x 和 y 为属性的对象。

    function drawBolt(bolt){
    context.save();
    context.translate(bolt.x, bolt.y);
    context.beginPath()
    context.moveTo(140,28);
    context.lineTo(164,28);
    context.moveTo(164,28);
    context.lineTo(138,53);
    context.moveTo(138,53);
    context.lineTo(157,53);
    context.moveTo(157,53);
    context.lineTo(122,81);
    context.moveTo(122,81);
    context.lineTo(137,82);
    context.moveTo(137,82);
    context.lineTo(93,105);
    context.moveTo(93,105);
    context.lineTo(109,87);
    context.moveTo(109,87);
    context.lineTo(100,87);
    context.moveTo(100,87);
    context.moveTo(126,61);
    context.lineTo(110,60);
    context.moveTo(110,60);
    context.lineTo(140,28);
    context.closePath();
    context.fill();
    context.restore();
};

这相当于绘制螺栓修改所有点，将 x 和 y 添加到每个点。

【讨论】：

确实有用，但绘图的左上角似乎在 (93, 28)，所以你必须在 (x-93, y-28) 移动。通过使用比例，大小也可以改变。