如何控制哪个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）

回答

相关问题