在多個畫布中繪製無縫圖案

我正在嘗試使用JS和Canvas元素製作一個簡單的繪圖工具。我的問題是，我想有幾個畫布，用戶應該能夠通過他們所有的畫線。這裏是我做的一個小頁面：在多個畫布中繪製無縫圖案

<!DOCTYPE html> 
<html> 
<head> 

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 

    <script type="text/javascript"> 

     var act = null; 
     var context = null; 
     var draw = false; 
     var c = false; 

     function boot() { 
      $('.can') 
       .mouseenter(function(){ 
        act = this; 
        context = act.getContext('2d'); 
        // console.log(this); 

       }) 
       .mouseleave(function(){ 
        act = null; 
        context = null; 
       //  console.log('out'); 
       }) 
       .mousedown(function(){ 
        draw = true; 
       }) 
       .mouseup(function(){ 
        draw = false; 
       }) 
       .mousemove(function(ev){ 

       // console.log(act); 
         if (ev.layerX || ev.layerX == 0) { // Firefox 
         x = ev.layerX; 
         y = ev.layerY; 
         } else if (ev.offsetX || ev.offsetX == 0) { // Opera 
         x = ev.offsetX; 
         y = ev.offsetY; 
         } 

        if(draw && context != null) 
         if (!c) { 
         context.beginPath(); 
         context.moveTo(x, y); 
         c = true; 
         } else { 
         context.lineTo(x, y); 
         context.stroke(); 
         } 
       }); 
     } 

     $(document).ready(boot); 
    </script> 

    <style> 
     .can {border: 1px solid blue; display:block; float:left; margin:0;} 
    </style> 

</head> 

<body> 
    <canvas class="can" id="c2" width="200" height="200"></canvas> 
    <canvas class="can" id="c1" width="200" height="200"></canvas> 
    <canvas class="can" id="c3" width="200" height="200"></canvas> 
</body> 
</html>

而且它部分地工作：我只能在第一個畫布中繪製。我對它進行了調試，並且我非常困惑，因爲上下文隨預期發生了變化，並且僅在第一個畫布中啓用了繪圖。

任何想法這種行爲的原因是什麼？

來源

2010-10-28 nooga

這是非常非常奇怪的。我在這個問題上遇到了更不可能的問題。我會隨時瞭解我所取得的進展。 – treeface 2010-10-28 23:46:32

行...發現問題:) – treeface 2010-10-29 00:15:41

好的，我找到了問題的根源。原來是在這裏：

http://jsfiddle.net/CVFv5/4/

固定的版本是在這裏：

http://jsfiddle.net/CVFv5/3/

基本上，問題是，你沒有計算你的X和Y正確瓦爾。 .offsetX和.offsetY計算相對於元素的直接祖先（在本例中爲頁面主體）的x和y位置。您可以通過在mouseover上提醒x和y值來看到這一點。無論如何，你必須做的是這樣的：

var o = $(this).offset(), 
    x = (ev.pageX - o.left), 
    y = (ev.pageY - o.top);

你的代碼還有一些其他問題，我已經改變。首先，你並沒有爲每個畫布開始新的路徑，所以當你重新進入畫布時，線條從此處離開的位置將是lineTo(x, y)。爲了解決這個問題，我做你的mouseout事件是這樣的：

.mouseout(function() { 
    c=false; 
})

現在，每當它進入一個新的畫布，將開始一個新的路徑。

我改變的第三件事是讓它只在文檔準備好時創建一次的上下文。我想這節省了一些處理。所以我說這條線，在全球範圍內：

var contexts = [];

而且這種方法在你的$('.can')方法鏈：

.each(function(el) { 
    id = this.id; 
    contexts[id] = this.getContext('2d'); 
})

所以其他地方在你的代碼，你可以像這樣引用它：

contexts[this.id].beginPath();

現在它的工作。

來源

2010-10-29 00:15:29 treeface

謝謝！聰明的解決方案:) – nooga 2010-10-29 09:21:53

在多個畫布中繪製無縫圖案

回答

相關問題