在单个页面上同时滚动2个单独的画布 [英] Syncrhonous scrolling of 2 separate canvases on a single page

问题描述

我有2个画布： -

I have 2 canvases:-

<canvas id="myCanvas" width="915" height="650" style="border: 2px double #000000;"></canvas>
    <canvas id="pharmacy" width="915" height ="320" style ="border:2px double #000000;"></canvas>

它们是单独的画布，在同一aspx页面上。

They are separate canvases, on the same aspx page.

这个想法是让它们都代表一个时间表。

The idea is to have them both represent a timeline. i.e they are both scrollable left to right and vice-versa.

我刚刚创建了第一个画布，最近决定实现第二个画布。

I had created the first canvas a while ago, and recently decided to implement the 2nd canvas.

当我复制粘贴在第二个画布中的原始代码以模拟滚动部分时，我发现在实践中，当我滚动时，只有原始的画布会滚动，没有。

When I copy pasted the original code in the 2nd canvas to emulate the scrolling part, I figured out that in practice, when I scrolled , only the original canvas would scroll and the new canvas doesn't.

如果我注释掉原始画布的代码，则新画布会滚动。

If I comment out the code for the original canvas then the new canvas scrolls.

认为，基于事件的滚动我试图实现在其命名约定有一些形式的缺陷。 （因为鼠标点击表示为事件，然后允许拖动;我的代码只是注册原始画布的拖动事件，而不是新的画布）。

Which led me to think, that the event based scrolling I was trying to achieve has some form of flaw in its naming convention. (since a mouse click is represented as an event and then dragging is allowed; my code was only registering dragging event of the original canvas and not the new canvas).

< a href =http://jsfiddle.net/przBL/3/ =nofollow> http://jsfiddle.net/przBL/3/

我非常感谢，如果有人可以看看代码，让我知道我在哪里错了

I would greatly appreciate if someone could take a look at the code and let me know where I am going wrong??

目标：

第一个画布： -

 // when mouse is clicked on canvas
        window.onmousedown = function (e) {
            var evt = e || event;
            // dragging is set to true.
            dragging = true;
            lastX = evt.offsetX;
        }

        // when mouse is clicked again and the canvas is deselected  
        window.onmouseup = function () {
            // dragging is set to false.
            dragging = false;
        }

        // when mouse is dragging the canvas sideways
        can.onmousemove = function (e) {
            var evt = e || event;
            if (dragging) {
                var delta = evt.offsetX - lastX;
                translated += delta;
                //console.log(translated);
                ctx.restore();
                ctx.clearRect(0, 0, 930, 900);
                ctx.save();
                ctx.translate(translated, 0);
                lastX = evt.offsetX;
                timeline();
            }
        }

第二画布： -

   // when mouse is clicked on canvas
   window.onmousedown = function (e) {
       var evt = e || event;
       // dragging is set to true.
       dragging = true;
       lastX = evt.offsetX;
   }


   // when mouse is clicked again and the canvas is deselected  
   window.onmouseup = function () {
       // dragging is set to false.
       dragging = false;
   }



   // when mouse is dragging the canvas sideways
   can1.onmousemove = function (e) {
       var evt = e || event;
       if (dragging) {
           var delta = evt.offsetX - lastX;
           translated += delta;
           //console.log(translated);
           ctx1.restore();
           ctx1.clearRect(0, 0, 915, 600);
           ctx1.save();
           ctx1.translate(translated, 0);
           lastX = evt.offsetX;
           pharm_line();
       }
   }

现在我想让can和can1同步移动任何mousedown和mousemove事件，并停止鼠标时。

now I want both can and can1 to move synchronously on any mousedown and mousemove event and stop when mouse is up.

推荐答案

您可以使用常见的鼠标处理程序来同时滚动两个画布。

You can use common mouse-handlers to identically scroll both canvas's.

请参阅下面的 window.onmousemove ，即可保持两个画布的翻译同步。

See window.onmousemove below which keeps both canvas's in translated sync.

 // when mouse is clicked on canvas
 window.onmousedown = function (e) {
     var evt = e || event;
     // dragging is set to true.
     dragging = true;
     lastX = evt.offsetX;
 }


 // when mouse is clicked again and the canvas is deselected  
 window.onmouseup = function (e) {
     // dragging is set to false.
     dragging = false;
 }


 window.onmousemove = function(e) {
      var evt = e || event;
      if (dragging) {
          var delta = evt.offsetX - lastX;
          translated += delta;
          move(ctx,930,900);
          move(ctx1,915,600);
          lastX = evt.offsetX;
          timeline();
          pharm_line();
      }
  }

  // common code used to service either canvas
  function move(context,width,height){
      context.restore();
      context.clearRect(0, 0, width, height);
      context.save();
      context.translate(translated, 0);
  }

这篇关于在单个页面上同时滚动2个单独的画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！