#7 약간의 쓰레시 홀드 값 주고 반응형 테스트

UTA-CONNECT · Jun 15, 2021 · 6658f4b · 6658f4b
1 parent bccd25e
commit 6658f4b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 17 deletions.
diff --git a/public/assets/css/ticketing-info.css b/public/assets/css/ticketing-info.css
@@ -18,19 +18,19 @@
 @media (min-width: 576px) {
     .ticketing-info {
         /* background-position-x: center; */
-        height: 213px;
+        height: 243px;
     }
 }
 @media (min-width: 768px) {
     .ticketing-info {
         /* background-position-x: 53%; */
-        height: 313px;
+        height: 363px;
     }
 }
 @media (min-width: 992px) {
     .ticketing-info {
         /* background-position-x: center; */
-        height: 313px;
+        height: 413px;
     }
 }
 @media (min-width: 1200px) {
@@ -42,5 +42,6 @@
 @media (min-width: 1400px) {
     .ticketing-info {
         /* background-position: center; */
+        height: 613px;
     }
 }
diff --git a/public/src/ticketing-info.js b/public/src/ticketing-info.js
@@ -5,13 +5,21 @@ ctx.imageSmoothingEnabled = true;
 const pixelRatio = window.devicePixelRatio;
 console.log(`pixelRatio: ${pixelRatio}`);
 
+const DEBUG_MODE = false;
+const angle = -3;
+let canvasBoundingRect = ticketingCanvas.getBoundingClientRect();
+
 function setCanvasBlockSize() {
     const rect = document.querySelector('div.ticketing-info').getBoundingClientRect();
     // console.log(ticketingCanvas);
     ticketingCanvas.style.width = `${rect.width}px`;
     ticketingCanvas.style.height = `${rect.height}px`;
     ticketingCanvas.width = rect.width * pixelRatio;
     ticketingCanvas.height = rect.height * pixelRatio;
+
+    canvasBoundingRect = ticketingCanvas.getBoundingClientRect();
+    canvasBoundingRect.width = canvasBoundingRect.width * pixelRatio;
+    canvasBoundingRect.height = canvasBoundingRect.height * pixelRatio;
 }
 
 function imgLoader(url) {
@@ -51,6 +59,7 @@ class TicketImg {
         this.img = img;
         this.originImg = img;
         this.scale = 1;
+        this.threshold = 40;
     }
 
     // y = ax, what is a ?
@@ -75,9 +84,10 @@ class TicketImg {
 
     update(degree, rect) {
         const [leftY, rightY] = minMaxY(degree, -rect.width / 2, rect.width / 2, 0);
-        const rotatedImgHeight = this.originImg.height + Math.abs(leftY) + Math.abs(rightY);
+        console.log(`[leftY, rightY] ${[leftY - this.img.height / 2, rightY + this.img.height / 2]}`);
+        const rotatedImgHeight = this.originImg.height + Math.abs(leftY) + Math.abs(rightY) + this.threshold;
         this.scale = rect.height / rotatedImgHeight;
-        console.log(this.scale, rotatedImgHeight, this.originImg.height, 'w', -rect.width / 2, rect.width / 2);
+        console.log(getLinearFuncAlpha(degree), this.scale, rotatedImgHeight, this.originImg.height, 'w', -rect.width / 2, rect.width / 2);
     }
 
     draw(degree, rect) {
@@ -90,30 +100,42 @@ class TicketImg {
         ctx.rotate(degree * Math.PI / 180);
         // ctx.drawImage(this.img, (-rect.width) * this.scale, (-rect.height / 2) * this.scale, this.img.width * this.scale, this.img.height * this.scale);
         ctx.drawImage(this.img, renderX, renderY, this.img.width * this.scale, this.img.height * this.scale);
-        ctx.fillStyle = 'rgba(155, 0, 0, 0.5)';
-        ctx.fillRect(renderX, renderY, this.img.width * this.scale, this.img.height * this.scale);
-        ctx.fillStyle = 'rgba(155, 155, 155, 0.5)'
-        ctx.fillRect(renderX + this.img.width * this.scale / 2 - 10 + this.x, renderY + this.img.height * this.scale / 2 - 10 + this.y, 20, 20)
+        if(DEBUG_MODE) {
+            ctx.fillStyle = 'rgba(155, 0, 0, 0.5)';
+            ctx.fillRect(renderX, renderY, this.img.width * this.scale, this.img.height * this.scale);
+            ctx.fillStyle = 'rgba(155, 155, 155, 0.5)'
+            ctx.fillRect(renderX + this.img.width * this.scale / 2 - 10 + this.x, renderY + this.img.height * this.scale / 2 - 10 + this.y, 20, 20)
+        }
         console.log(minMaxY(degree, -rect.width / 2, rect.width / 2, 0), getLinearFuncAlpha(degree));
+
+
+        ctx.translate(0, 0);
+        ctx.rotate(0);
     }
 }
 
 window.addEventListener('resize', (e) => {
     setCanvasBlockSize();
+    render();
 })
 setCanvasBlockSize();
 
+let ticketMapped = undefined;
+
 Promise.all([
     imgLoader('./assets/img/ticketing-container.png'), 
     imgLoader('./assets/img/ticketing-container-mapped.png'), 
 ])
 .then(imgList => {
-    const degree = -3;
     const [ticketingContainer, ticketingContainerMapped] = imgList;
-    const ticketMapped = new TicketImg(0, 0, ticketingContainerMapped);
-    const rect = ticketingCanvas.getBoundingClientRect();
-    rect.width = rect.width * pixelRatio;
-    rect.height = rect.height * pixelRatio;
-    ticketMapped.update(degree, rect);
-    ticketMapped.draw(degree, rect);
-})
+    ticketMapped = new TicketImg(0, 0, ticketingContainerMapped); 
+    render();
+})
+
+function render() {
+    ctx.clearRect(0, 0, canvasBoundingRect.width, canvasBoundingRect.height);
+    if (ticketMapped) {
+        ticketMapped.update(angle, canvasBoundingRect);
+        ticketMapped.draw(angle, canvasBoundingRect);  
+    }
+}