From 182e6c057a67d60fef8cfc9dbf9038e2f0d109a9 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Sat, 3 Aug 2019 19:22:44 +0900 Subject: [PATCH] Added (mirror:x), (mirror:y) and (orient), fixes #103 --- README.md | 6 ++-- desktop/sources/scripts/commander.js | 1 - desktop/sources/scripts/docs.js | 1 - desktop/sources/scripts/library.js | 43 ++++++++++++++++++++++++++-- desktop/sources/scripts/surface.js | 29 +++---------------- 5 files changed, 48 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 3a505c1..3f3ca9d 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i - `(import path shape ~alpha)` Imports a graphic file with format. - `(export path ~format ~quality)` Exports a graphic file with format. -- `(open path ~ratio ~orientation ~mirrorx ~mirrory)` Imports a graphic file and resizes the frame. +- `(open path ~ratio)` Imports a graphic file and resizes the frame. - `(exit ~force)` Exits Ronin. - `(pos ~x ~y)` Returns a position shape. - `(line ax ay bx by)` Returns a line shape. @@ -62,7 +62,9 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i - `(drag ~rect)` Drag a part of the canvas. - `(view a b)` View a part of the canvas. - `(pick ~shape)` Returns the color of a pixel at pos, or of the average of the pixels in rect. -- `(transform)` The transform toolkit. +- `(orient ~deg)` Orient canvas with angle in degrees. +- `(mirror)` Mirror canvas, methods: `x`, `y`. +- `(transform)` The transform toolkit, methods `push`, `pop`, `reset`, `move`, `scale`, `rotate`. - `(stroke shape color ~thickness)` Strokes a shape. - `(fill ~rect)` Fills a shape. - `(clear ~rect)` Clears a rect. diff --git a/desktop/sources/scripts/commander.js b/desktop/sources/scripts/commander.js index 9a0e32c..35e6997 100644 --- a/desktop/sources/scripts/commander.js +++ b/desktop/sources/scripts/commander.js @@ -76,7 +76,6 @@ function Commander (ronin) { const pos = this._input.value.substr(0, this._input.selectionStart).lastIndexOf('(') return this._input.value.substr(pos).split(' ')[0].replace(/\(/g, '').replace(/\)/g, '').trim() } - this.reindent = function () { let val = this._input.value.replace(/\n/g, '').replace(/ \)/g, ')').replace(/ +(?= )/g, '').replace(/\( \(/g, '((').replace(/\) \)/g, '))').trim() diff --git a/desktop/sources/scripts/docs.js b/desktop/sources/scripts/docs.js index ea8dce1..b23d3f0 100644 --- a/desktop/sources/scripts/docs.js +++ b/desktop/sources/scripts/docs.js @@ -1,5 +1,4 @@ function Docs (ronin) { - this.dict = {} this.load = () => { diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js index 6fb9869..dbbdc2e 100644 --- a/desktop/sources/scripts/library.js +++ b/desktop/sources/scripts/library.js @@ -19,8 +19,8 @@ function Library (ronin) { return path } - this.open = async (path, ratio = 1, orientation = 0, mirrorx = 1, mirrory = 1) => { // Imports a graphic file and resizes the frame. - return ronin.surface.open(path, ratio, orientation, mirrorx, mirrory) + this.open = async (path, ratio = 1) => { // Imports a graphic file and resizes the frame. + return ronin.surface.open(path, ratio) } this.exit = (force = false) => { // Exits Ronin. @@ -144,9 +144,46 @@ function Library (ronin) { return this.color(this.floor(sum[0] / count), this.floor(sum[1] / count), this.floor(sum[2] / count)) } + this.orient = async (deg = 0) => { // Orient canvas with angle in degrees. + const mode = Math.floor(deg / 90) % 4 + const img = document.createElement('img') + img.onload = () => { + const offset = { x: [0, 0, -img.width, -img.width], y: [0, -img.height, -img.height, 0] } + const rect = { x: 0, y: 0, w: (mode === 1 || mode === 3 ? img.height : img.width), h: (mode === 1 || mode === 3 ? img.width : img.height) } + ronin.surface.resize(rect, false) + ronin.surface.context.save() + ronin.surface.context.rotate(this.rad(mode * 90)) + ronin.surface.context.translate(offset.x[mode], offset.y[mode]) + ronin.surface.context.drawImage(img, 0, 0) + ronin.surface.context.restore() + } + img.src = ronin.surface.el.toDataURL() + } + + this.mirror = { // Mirror canvas, methods: `x`, `y`. + x: async (j = 0) => { + const img = document.createElement('img') + img.src = ronin.surface.el.toDataURL() + ronin.surface.context.save() + ronin.surface.context.translate(img.width, 0) + ronin.surface.context.scale(-1, 1) + ronin.surface.context.drawImage(img, 0, 0) + ronin.surface.context.restore() + }, + y: async (j = 0) => { + const img = document.createElement('img') + img.src = ronin.surface.el.toDataURL() + ronin.surface.context.save() + ronin.surface.context.translate(0, img.height) + ronin.surface.context.scale(1, -1) + ronin.surface.context.drawImage(img, 0, 0) + ronin.surface.context.restore() + } + } + // Transforms - this.transform = { // The transform toolkit. + this.transform = { // The transform toolkit, methods `push`, `pop`, `reset`, `move`, `scale`, `rotate`. push: () => { ronin.surface.context.save() }, diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js index d4970e3..c7bb04d 100644 --- a/desktop/sources/scripts/surface.js +++ b/desktop/sources/scripts/surface.js @@ -21,8 +21,6 @@ function Surface (ronin) { this._guide.addEventListener('keydown', ronin.onKeyDown, false) this._guide.addEventListener('keyup', ronin.onKeyUp, false) this._guide.addEventListener('keypress', ronin.onKeyPress, false) - - this.frame = this.getFrame() } this.start = function () { @@ -151,36 +149,19 @@ function Surface (ronin) { // IO - this.open = function (path, ratio = 1, orientation = 0, mirrorx = 1, mirrory = 1) { + this.open = (path, ratio = 1) => { return new Promise(resolve => { const img = new Image() img.src = path img.onload = () => { - this.drawWithOrientation(img, ratio, orientation, mirrorx, mirrory) + const rect = { x: 0, y: 0, w: img.width * ratio, h: img.height * ratio } + this.resize(rect) + this.context.drawImage(img, rect.x, rect.y, rect.w, rect.h) resolve() } }) } - this.drawWithOrientation = function (img, ratio, orientation = 0, mirrorx = 1, mirrory = 1) { // x, y, w, h, degrees - const outputRect = { x: 0, y: 0, w: parseInt((orientation === 1 || orientation === 3 ? img.height : img.width) * ratio), h: parseInt((orientation === 1 || orientation === 3 ? img.width : img.height) * ratio) } - const rect = { x: 0, y: 0, w: parseInt(img.width * ratio), h: parseInt(img.height * ratio) } - this.resize(outputRect, true) - this.context.save() - - this.context.rotate((orientation * 90) * Math.PI / 180.0) - if (orientation === 1) { - this.context.translate(0, -rect.h) - } else if (orientation === 2) { - this.context.translate(-rect.w, -rect.h) - } else if (orientation === 3) { - this.context.translate(-rect.w, 0) - } - this.context.scale(mirrorx, mirrorx) - this.context.drawImage(img, rect.x, rect.y, rect.w * mirrorx, rect.h * mirrory) - this.context.restore() - } - this.draw = function (img, shape = this.getFrame(), alpha = 1) { return new Promise(resolve => { img.onload = () => { @@ -227,7 +208,6 @@ function Surface (ronin) { if (shape.circle) { this.stroke(shape.circle, 'black', 4, context) } - this.stroke(shape.rect || shape, color, 1.5, context) if (shape.pos) { this.stroke(shape.pos, color, 1.5, context) } if (shape.line) { this.stroke(shape.line, color, 1.5, context) } @@ -248,7 +228,6 @@ function Surface (ronin) { this._guide.height = size.h this._guide.style.width = (size.w / this.ratio) + 'px' this._guide.style.height = (size.h / this.ratio) + 'px' - this.frame = this.getFrame() if (fit === true) { this.fitWindow(size) }