如何控制哪個Canvas圖層首先繪製（JCanvas）

在下面的代碼中，我有兩個Canvas圖層一個文本和一個圖像，我遇到的問題是控制首先繪製哪個圖層。當頁面被加載時，文本可能會在圖像上方繪製或者吹動圖像，看起來很隨意。有沒有一種方法可以控制這種行爲？如何控制哪個Canvas圖層首先繪製（JCanvas）

我嘗試：

{% extends "layout.html" %} 
{% block body %} 
<script> 
    window.onload = function(){ 
      $("canvas").addLayer({ 
       method: "drawImage", 
       source: '{{ url_for('static', filename='100MV-Floor-Plan.png') }}', 
       x: 700, y: 300, 
      }) 

      $("canvas").addLayer({ 
        method: "drawText", 
        strokeStyle: "C35817", 
        x:{{ room.xPos }}, y: {{ room.yPos }}, 
        text: '{{ room.room_id }}', 
        align: "center", 
        baseline: "middle" 
      }) 

      $("canvas").getLayer(0); 
      $("canvas").getLayer(1); 
      $("canvas").drawLayers(); 
     }; 
</script> 
<canvas width="1397" height="711"></canvas> 
<h1>{{ room.current_user }}</h1> 
<form method=POST> 
    Room ID: <input type="text" name="room_id"/><br /> 
    <input type="submit" value="Click" class="button"> 
</form> 
{% endblock %}

來源

2011-12-01 cryptojuice

這不是一個瓶或Jinja2的問題，它的JavaScript。 – amirouche

@FMR想到人們可能會想知道我爲什麼在我的代碼中引用像'{{url_for（'static'，filename ='100MV-Floor-Plan.png'）}}'這樣的字符串。但我想你的權利，標籤已更新。 – cryptojuice

更新代碼以指出與燒瓶無關的問題，也就是說可以通過服務器端處理動態地解決一些問題，但最好先提出一個完整的JavaScript解決方案。如果你沒有找到一個純粹的javascript，你可能會回到服務器端的解決方案。 – amirouche

回去和看在jcanvas DOC的，我再次找到了解決辦法之後。通過使用drawImage（）的「加載」回調函數，我可以在加載圖像後調用drawText（）。

更新的代碼：

1 {% extends "layout.html" %} 
2 {% block body %} 
3  <script> 
4   window.onload = function(){ 
5     $("canvas").drawImage({ 
6      source: '{{ url_for('static', filename='100MV-Floor-Plan.png') }}', 
7      x: 700, y: 300, 
8      load: displayText 
9     }) 
10 
11     function displayText() { 
12      $("canvas").drawText({ 
13       strokeStyle: "C35817", 
14       x:{{ room.xPos }}, y: {{ room.yPos }}, 
15       text: '{{ room.room_id }}', 
16       align: "center", 
17       baseline: "middle" 
18       }); 
19     }; 
20    }; 
21  </script> 
22  <canvas width="1397" height="711"></canvas> 
23  <h1>{{ room.current_user }}</h1> 
24  <form method=POST> 
25   Room ID: <input type="text" name="room_id"/><br /> 
26   <input type="submit" value="Click" class="button"> 
27  </form> 
28 {% endblock %}

來源

2011-12-01 20:55:16 cryptojuice

如果這解決了您的問題，您是否可以通過單擊旁邊的複選標記將其標記爲解決方案？ – linqq

看起來像需要一定數量的代表點才能立即接受你自己的答案。它說我還有12個小時去。 – cryptojuice

如何控制哪個Canvas圖層首先繪製（JCanvas）

回答

相關問題