From 13da5aaf819ea2de64e1bebbb1b5e6430eb36773 Mon Sep 17 00:00:00 2001 From: Francisco Sanz Date: Thu, 19 Sep 2024 23:37:32 +0200 Subject: [PATCH] Improvements on styles, all that is on javascript is working, so far so good: - Three columns layout with bootstrap - 100 % height on the columns - Added leaflet map - Added fabricjs for image manipulation - We can zoom, rotate and move images - We can get the actual px, py of the images independently of img transformations --- frontend/templates/task2.html | 53 +++++++++++++++++++++++------------ 1 file changed, 35 insertions(+), 18 deletions(-) diff --git a/frontend/templates/task2.html b/frontend/templates/task2.html index be04827..5d406fd 100644 --- a/frontend/templates/task2.html +++ b/frontend/templates/task2.html @@ -17,27 +17,39 @@ integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""> -
-
+
+

Icon List

@@ -45,9 +57,9 @@

Icon List

-
+
-
+
@@ -83,9 +95,14 @@

Icon List

stopContextMenu: true, // Disable the default context menu selection: false // Disable object selection }); - const canvasWidth = canvas.width; - const canvasHeight = canvas.height; const imageUrl = "{% static 'images/ISS030-E-274867.JPG' %}"; + console.log($('#column-right').width()); + console.log($('#column-right').height()); + const canvasWidth = $('#column-right').width(); // Canvas width + const canvasHeight = $('#column-right').height(); // Canvas height + canvas.setWidth(canvasWidth); // Set the canvas width + canvas.setHeight(canvasHeight); // Set the canvas height + // Load an image into the Fabric canvas fabric.Image.fromURL(imageUrl, function(img) { @@ -93,8 +110,8 @@

Icon List

const scaleY = canvasHeight / img.height; const scale = Math.min(scaleX, scaleY); img.set({ - left: (canvasWidth - img.width * scale) / 2, // Center horizontally - top: (canvasHeight - img.height * scale) / 2, // Center vertically + left: 0, // Center horizontally + top: 0, // Center vertically originX: 'left', originY: 'top', scaleX: scale,