- commit
- e8e559888cf3564deb2a64be6da3229e0dd3e205
- parent
- 679bed92a07f1dd0efb6dc9c4dfa8e82cd525089
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2023-02-13 06:17
move more things to modules
Diffstat
| M | frame.js | 43 | +++++++++++++++++++++++++++++++++++++------ |
| M | paint.js | 59 | +++++++++-------------------------------------------------- |
| M | view.js | 14 | ++++++++++++++ |
3 files changed, 60 insertions, 56 deletions
diff --git a/frame.js b/frame.js
@@ -1,7 +1,6 @@1 -1 export var PXSIZE = 12;2 -13 1 export class Frame { 4 2 constructor() { -1 3 this.pxsize = 12; 5 4 this.image = null; 6 5 this.canvas = document.createElement('canvas'); 7 6 this.ctx = this.canvas.getContext('2d'); @@ -10,8 +9,8 @@ export class Frame { 10 9 setImage(image) { 11 10 this.image = image; 12 11 if (this.image) {13 -1 this.canvas.width = image.width * PXSIZE;14 -1 this.canvas.height = image.height * PXSIZE;-1 12 this.canvas.width = image.width * this.pxsize; -1 13 this.canvas.height = image.height * this.pxsize; 15 14 this.ctx.textAlign = 'center'; 16 15 this.ctx.textBaseline = 'middle'; 17 16 this.fill(0); @@ -21,11 +20,18 @@ export class Frame { 21 20 _setPixel(x, y, color) { 22 21 var i = y * this.image.width + x; 23 22 this.ctx.fillStyle = this.image.colors[color];24 -1 this.ctx.fillRect(x * PXSIZE, y * PXSIZE, PXSIZE, PXSIZE);-1 23 this.ctx.fillRect( -1 24 x * this.pxsize, -1 25 y * this.pxsize, -1 26 this.pxsize, -1 27 this.pxsize, -1 28 ); 25 29 if (color !== this.image.data[i]) { 26 30 this.ctx.fillStyle = this.image.contrasts[color]; 27 31 this.ctx.fillText(28 -1 this.image.data[i], (x + 0.5) * PXSIZE, (y + 0.5) * PXSIZE-1 32 this.image.data[i], -1 33 (x + 0.5) * this.pxsize, -1 34 (y + 0.5) * this.pxsize, 29 35 ); 30 36 } 31 37 } @@ -47,4 +53,29 @@ export class Frame { 47 53 } 48 54 } 49 55 } -1 56 -1 57 drawLine(x1, y1, x2, y2, color) { -1 58 var a, x, y; -1 59 var dx = Math.abs(x1 - x2); -1 60 var dy = Math.abs(y1 - y2); -1 61 -1 62 if (dx === 0 && dy === 0) { -1 63 this.setPixel(Math.floor(x1), Math.floor(y1), color); -1 64 } -1 65 if (dx > dy) { -1 66 a = (y1 - y2) / (x1 - x2); -1 67 for (x = Math.floor(Math.min(x1, x2)) + 1; x <= Math.max(x1, x2); x++) { -1 68 y = a * (x - x2) + y2; -1 69 this.setPixel(x, y, color); -1 70 this.setPixel(x - 1, y, color); -1 71 } -1 72 } else { -1 73 a = (x1 - x2) / (y1 - y2); -1 74 for (y = Math.floor(Math.min(y1, y2)) + 1; y <= Math.max(y1, y2); y++) { -1 75 x = a * (y - y2) + x2; -1 76 this.setPixel(x, y, color); -1 77 this.setPixel(x, y - 1, color); -1 78 } -1 79 } -1 80 } 50 81 }
diff --git a/paint.js b/paint.js
@@ -1,4 +1,4 @@1 -1 import { Frame, PXSIZE } from './frame.js';-1 1 import { Frame } from './frame.js'; 2 2 import { View } from './view.js'; 3 3 import { loadImage } from './loader.js'; 4 4 import * as utils from './utils.js'; @@ -64,19 +64,8 @@ var applySpeed = utils.throttle(function() { 64 64 65 65 window.addEventListener('resize', () => view.refreshSize()); 66 6667 -1 window.addEventListener('wheel', event => {68 -1 var rect = canvas.getBoundingClientRect();69 -1 var cx = event.clientX - rect.x;70 -1 var cy = event.clientY - rect.y;71 -172 -1 var ocx = (cx - view.dx) / view.zoom;73 -1 var ocy = (cy - view.dy) / view.zoom;74 -175 -1 view.zoom *= Math.pow(2, -event.deltaY / 100 / 100);76 -177 -1 view.dx = cx - ocx * view.zoom;78 -1 view.dy = cy - ocy * view.zoom;79 -1-1 67 canvas.addEventListener('wheel', event => { -1 68 view.setZoom(event.offsetX, event.offsetY, view.zoom * Math.pow(2, -event.deltaY / 100 / 100)); 80 69 view.render(); 81 70 }); 82 71 @@ -111,54 +100,24 @@ window.addEventListener('keydown', event => { 111 100 view.render(); 112 101 }); 113 102114 -1 var drawLine = function(x1, y1, x2, y2, color) {115 -1 var a, x, y;116 -1 var dx = Math.abs(x1 - x2);117 -1 var dy = Math.abs(y1 - y2);118 -1119 -1 if (dx === 0 && dy === 0) {120 -1 frame.setPixel(Math.floor(x1), Math.floor(y1), color);121 -1 }122 -1 if (dx > dy) {123 -1 a = (y1 - y2) / (x1 - x2);124 -1 for (x = Math.floor(Math.min(x1, x2)) + 1; x <= Math.max(x1, x2); x++) {125 -1 y = a * (x - x2) + y2;126 -1 frame.setPixel(x, y, color);127 -1 frame.setPixel(x - 1, y, color);128 -1 }129 -1 } else {130 -1 a = (x1 - x2) / (y1 - y2);131 -1 for (y = Math.floor(Math.min(y1, y2)) + 1; y <= Math.max(y1, y2); y++) {132 -1 x = a * (y - y2) + x2;133 -1 frame.setPixel(x, y, color);134 -1 frame.setPixel(x, y - 1, color);135 -1 }136 -1 }137 -1 };138 -1139 103 var last_click = null; 140 104141 -1 var onClick = utils.throttle(function(event) {-1 105 var onClick = function(event) { 142 106 if (event.buttons & 1) {143 -1 var rect = canvas.getBoundingClientRect();144 -1 var cx = event.clientX - rect.x;145 -1 var cy = event.clientY - rect.y;146 -1147 -1 var ocx = (cx - view.dx) / view.zoom / PXSIZE;148 -1 var ocy = (cy - view.dy) / view.zoom / PXSIZE;-1 107 var [frame_x, frame_y] = view.toFrameXY(event.offsetX, event.offsetY); 149 108 150 109 if (last_click) {151 -1 drawLine(last_click.x, last_click.y, ocx, ocy, pencil);-1 110 frame.drawLine(last_click.x, last_click.y, frame_x, frame_y, pencil); 152 111 } else {153 -1 frame.setPixel(ocx, ocy, pencil);-1 112 frame.setPixel(frame_x, frame_y, pencil); 154 113 }155 -1 last_click = {x: ocx, y: ocy};-1 114 last_click = {x: frame_x, y: frame_y}; 156 115 157 116 view.render(); 158 117 } else { 159 118 last_click = null; 160 119 }161 -1 }, 'animation');-1 120 }; 162 121 163 122 canvas.addEventListener('mousemove', onClick); 164 123 canvas.addEventListener('mousedown', onClick);
diff --git a/view.js b/view.js
@@ -22,6 +22,20 @@ export class View {
22 22 this.render();
23 23 }
24 24
-1 25 toFrameXY(x, y) {
-1 26 var frame_x = (x - this.dx) / this.zoom / this.frame.pxsize;
-1 27 var frame_y = (y - this.dy) / this.zoom / this.frame.pxsize;
-1 28
-1 29 return [frame_x, frame_y];
-1 30 }
-1 31
-1 32 setZoom(stable_x, stable_y, zoom) {
-1 33 var [frame_x, frame_y] = this.toFrameXY(stable_x, stable_y);
-1 34 this.zoom = zoom;
-1 35 this.dx = stable_x - frame_x * zoom * this.frame.pxsize;
-1 36 this.dy = stable_y - frame_y * zoom * this.frame.pxsize;
-1 37 }
-1 38
25 39 render() {
26 40 this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
27 41 this.ctx.drawImage(