Как я могу контролировать, какой слой холста рисует первым (JCanvas) - PullRequest
Новая
       29

Как я могу контролировать, какой слой холста рисует первым (JCanvas)

1 голос
/ 01 декабря 2011

В приведенном ниже коде у меня есть два слоя Canvas, один текст и одно изображение, проблема в том, как я контролирую, какой слой рисует первым.Когда страница загружена, текст может нарисоваться выше или взорвать изображение, это кажется довольно случайным.Есть ли способ, которым я могу контролировать это поведение?

Моя попытка: 

{% 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 %}

1 Ответ

4 голосов
/ 02 декабря 2011

Вернувшись назад и снова посмотрев документы Jcanvas, я нашел решение.Используя функцию обратного вызова 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 %}
...