Как контролировать, какой слой холст рисует первым (jcanvas)
-
26-10-2019 - |
Вопрос
В приведенном ниже коде у меня есть два слоя холста один текст и одно изображение, проблема, с которой я столкнулся, заключается в управлении, какой слой рисует первым. Когда страница загружена, текст может рисовать выше или взорвать изображение, он кажется довольно случайным. Есть ли способ контролировать это поведение?
Моя попытка:
{% 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 %}
Решение
Вернувшись и снова посмотрев через JCanvas Doc, я нашел решение. Используя функцию вызовов «загрузка» DraitImage (), я могу вызовать DraitText () после загрузки изображения.
Обновленный код:
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 %}
Не связан с StackOverflow