一个接一个地在HTML画布上绘制连续线 [英] Draw continuous lines on HTML canvas one after the other

问题描述

我正在尝试为上述问题编写代码。我试着找到一个解决方案。这是我目前有的。

 < canvas id ='canvas'width ='400'height ='400'>< / canvas>  

都是在同一时间绘制。一个应该跟着另一个。使用promsises可以延迟第二个函数，同时第一个函数被执行，然后执行第二个函数？我尝试在Promises上阅读，但我不能将我理解的代码翻译成代码。

提前感谢。

解决方案

是的，你可以使用promises，altough为了学习的目的，你可能想要写一个纯回调解决方案。

您需要查看我的经验法则，了解promise开发。让我们在这里应用它们：

1. 每个异步函数必须返回一个promise。

   
   
   

   这些将是 drawColorLine ， draw 和 requestAnimationFrame




2. requestAnimationFrame 是一个原生的，基本的异步函数，回调，我们必须 promisify 它：

     function getAnimationFrame（）{
    return new Promise（function（resolve）{
    requestAnimationFrame（resolve）; //这个promise永远不会被拒绝
    // TODO：取消支持:-) 
   }）; 
   } 
     




3. 执行异步操作后的所有内容都变成 .then（）回调：

     function drawColorLine（start，end，color）{
    ... // initialisation 
    
    function draw（）{
    ... //做工作
    //总是返回一个promise：
    if（/ * furter work * /）{
    i ++; 
    return getAnimationFrame（）。then（draw）; // magic happens here :-) 
   } else {
    return Promise.resolve（...）; //可能有一个路径对象作为最终结果？ 
    //或其他任何东西，包括没有（没有arg）
   } 
   } 
    return draw（）; //返回一个promise  - 但不要忘记`return` 
   } 
     

Voila！

  drawColorLine（[40，40]，[100，40] ，'＃116699'）。then（function（）{
 return drawColorLine（[40，40]，[40，100]，'＃bb11dd'）; 
} .bind（console，both lines drawn））; 
  

I am trying to write code for the above described problem. I tried finding a solution. This is what I currently have.

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var drawColorLine = function(start, end, color) {
  var deltaX, deltaY, i = 0,
    currLength = 0,
    isHor, isVert;

  deltaX = end[0] - start[0];
  deltaY = end[1] - start[1];
  context.strokeStyle = color;

  isHor = deltaX === 0 ? 0 : 1;
  isVert = deltaY === 0 ? 0 : 1;

  function draw() {
    context.beginPath();
    context.moveTo(start[0] + currLength * isHor, start[1] + currLength * isVert);

    currLength = currLength + 0.5 * i;
    context.lineTo(start[0] + currLength * isHor, start[1] + currLength * isVert);
    context.stroke();

    if (currLength <= Math.max(deltaX, deltaY)) {
      i = i + 1;
      requestAnimationFrame(draw);
    }
  }
  draw();
};

drawColorLine([40, 40], [100, 40], '#116699');
drawColorLine([40, 40], [40, 100], '#bb11dd');

<canvas id='canvas' width='400' height='400'></canvas>

The problem is both are being drawn at the same time. One should follow after the other. Using promsises is it possible to delay the second function while the first function is getting executed and later execute second function? I tried reading on Promises a bit but I couldn't translate what I understood into code.

Thanks in advance.

解决方案

Yes, you can use promises, altough for learning purposes you might want to write a pure callback solution first.

You'll want to have a look at my rules of thumb for promise development. Let's apply them here:

1. Every asynchronous function must return a promise.

   These would be drawColorLine, draw, and requestAnimationFrame in your case.

2. As requestAnimationFrame is a native, primitively asynchronous function that unfortunately still takes a callback, we'll have to promisify it:

   function getAnimationFrame() {
       return new Promise(function(resolve) {
           requestAnimationFrame(resolve); // this promise never gets rejected
           // TODO: cancellation support :-)
       });
   }
   

3. Everything that follows an asynchronous action goes into a .then() callback:

   function drawColorLine(start, end, color) {
       … // initialisation
   
       function draw() {
           … // do work
           // always return a promise:
           if (/* furter work */) {
               i++;
               return getAnimationFrame().then(draw); // magic happens here :-)
           } else {
               return Promise.resolve(…); // maybe have a path object as eventual result?
                                          // or anything else, including nothing (no arg)
           }
       }
       return draw(); // returns a promise - but don't forget the `return`
   }
   

Voila!

drawColorLine([40, 40], [100, 40], '#116699').then(function() {
    return drawColorLine([40, 40], [40, 100], '#bb11dd');
}).then(console.log.bind(console, "both lines drawn"));

这篇关于一个接一个地在HTML画布上绘制连续线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！