Здравствуйте!
Бьюсь третий день, пожалуйста, подскажите. Не могу решить проблему передачи координат из канвы в базу django и обратно.
Вот такая рисовалка схем на django. Пока рисуем просто линии, но эти линии надо сохранить в базе. То есть я рисую, она должна сразу сохраняться в базе:
canvas.js:var ctx = canvas.getContext('2d');
var raf;
var running = false;
var mouseOldPos;
var mousePos;
var wallLine = {
draw: function() {
ctx.beginPath();
ctx.moveTo(mouseOldPos.x, mouseOldPos.y);
ctx.lineTo(mousePos.x, mousePos.y);
ctx.stroke();
}
};
function clear() {
ctx.fillStyle = 'rgba(255, 255, 255, 1)';
ctx.fillRect(0,0,canvas.width,canvas.height);
}
canvas.addEventListener('mousemove', function(e) {
ctx.lineWidth = 10.0;
ctx.lineCap = 'square';
if (running) {
clear();
mousePos = getMousePos(canvas, e);
wallLine.draw();
}
});
canvas.addEventListener('click', function(e) {
if (!running) {
mouseOldPos = getMousePos(canvas, e);
running = true;
} else {
running = false;
}
});
function getMousePos(canvas, e) {
var rect = canvas.getBoundingClientRect();
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
Шаблон plan_detail.html:{% extends "base_generic.html" %}
{% block content %}
<h1>Name: {{ plan.name }}</h1>
<strong>Architect:</strong> {{ plan.architect }}</p>
<p><strong>Approved:</strong> {{ plan.approved }}</p>
<p><strong>num_elements:</strong> {{ num_elements }}</p>
<p><strong>Approve Date:</strong> {{ plan.approve_date }}</p>
{% if perms.catalog.can_edit_plan %}
<a href="{% url }">Edit</a>
{% endif %}
<canvas id="canvas" style="border: 1px solid" width="1000" height="700"></canvas>
{% load static %}
<script type="text/javascript" src="{% static 'js/canvas.js' %}"></script>
<script>
var canvas = document.getElementById('canvas');
</script>
{% endblock %}
Как видите выше, я пытался связать все это через скрипт на странице со скриптом в файле, но не вышло.
Модель в models.py для всех линий всех схем:
class Element(models.Model):
"""Element - it's wall or smth else on the axis. Between axises"""
#axis_owner = models.ForeignKey(Axis, on_delete=models.SET_NULL, null=True, blank=True, related_name='axis_owner') # need for slanted axises???
plan_id = models.UUIDField(null=True, blank=True)
axis_id = models.IntegerField()
x0 = models.IntegerField()
y0 = models.IntegerField()
x1 = models.IntegerField()
y1 = models.IntegerField()
# for explicitly specify alignment. By default alignment define automatically:
ALIGN = (
('l', 'Left'),
('r', 'Right'),
('c', 'Center'),
('a', 'Auto'),
)
align = models.CharField(
max_length=1,
choices=ALIGN,
blank=True,
default='c',
help_text='You can explicitly specify alignment option. Default = Auto',
)
def save(self, *args, **kwargs):
super(Element, self).save(*args, **kwargs)
def __str__(self):
"""String for representing the Model object."""
return self.axis_id
строчка в urls.py:path('plan/<uuid:pk>/', views.canvasData, name='plan-detail'),
Функция в views.py:def canvasData(request, pk):
"""View function for elements rendering on canvas"""
context = {
}
return render(request, 'catalog/plan_detail.html', context=context)
Где pk - это pk схемы (plan_id в классе Element ), каждая схема имеет свой набор этих самых линий.
В итоге моя штука должна выглядеть примерно так:
