diff --git a/README.md b/README.md index 054398a..6f46953 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,9 @@ Ronin helpers are keywords that facilitates adding coordinates from the canvas i - `(center)` Returns a position of the center of the frame. - `(resize ~w)` Resizes the canvas to target w and h, returns the rect. - `(rescale w h)` Rescales the canvas to target ratio of w and h, returns the rect. -- `(crop rect)` Crop canvas to rect. +- `(crop ~rect)` Crop canvas to rect. +- `(copy ~rect)` Copy a section of the canvas. +- `(paste copy ~rect)` Paste a section of the canvas. - `(clone a b)` - `(drag ~rect)` Drag a part of the canvas. - `(view a b)` View a part of the canvas. diff --git a/desktop/sources/scripts/library.js b/desktop/sources/scripts/library.js index 0bbbbeb..b0beb88 100644 --- a/desktop/sources/scripts/library.js +++ b/desktop/sources/scripts/library.js @@ -170,10 +170,18 @@ function Library (ronin) { return ronin.surface.draw(b, rect) } - this.crop = async (rect) => { // Crop canvas to rect. + this.crop = async (rect = this.frame()) => { // Crop canvas to rect. return ronin.surface.crop(rect) } + this.copy = async (rect = this.frame()) => { // Copy a section of the canvas. + return ronin.surface.copy(rect) + } + + this.paste = async (copy, rect = this.frame()) => { // Paste a section of the canvas. + return ronin.surface.paste(copy, rect) + } + this.clone = (a, b) => { ronin.surface.clone(a, b) return [a, b] @@ -181,7 +189,7 @@ function Library (ronin) { this.drag = (rect = this.frame(), line = this.line()) => { // Drag a part of the canvas. const pos = { x: line.b.x - line.a.x, y: line.b.y - line.a.y } - const crop = ronin.surface.getCrop(rect) + const crop = ronin.surface.copy(rect) ronin.surface.clear(rect) this.guide({ a: { x: rect.x, y: rect.y }, b: { x: pos.x + rect.x, y: pos.y + rect.y } }) this.guide(rect) @@ -193,7 +201,7 @@ function Library (ronin) { this.guide({ a: { x: a.x, y: a.y }, b: { x: b.x, y: b.y } }) this.guide(a) this.guide(b) - ronin.surface.context.drawImage(ronin.surface.getCrop(a), b.x, b.y, b.w, b.h) + ronin.surface.context.drawImage(ronin.surface.copy(a), b.x, b.y, b.w, b.h) } this.pick = (shape = this.frame()) => { // Returns the color of a pixel at pos, or of the average of the pixels in rect. diff --git a/desktop/sources/scripts/surface.js b/desktop/sources/scripts/surface.js index ff7a017..8cbcc04 100644 --- a/desktop/sources/scripts/surface.js +++ b/desktop/sources/scripts/surface.js @@ -183,7 +183,7 @@ function Surface (ronin) { this.crop = function (rect) { ronin.log(`Crop ${rect.w}x${rect.h} from ${rect.x}x${rect.y}`) - const crop = this.getCrop(rect) + const crop = this.copy(rect) this.resize(rect, true) this.context.drawImage(crop, 0, 0) } @@ -261,7 +261,7 @@ function Surface (ronin) { ronin.log(`resize ${f.w}x${f.h}`) } - this.getCrop = function (rect) { + this.copy = function (rect) { const newCanvas = document.createElement('canvas') newCanvas.width = rect.w newCanvas.height = rect.h @@ -269,6 +269,11 @@ function Surface (ronin) { return newCanvas } + this.paste = function (copy, rect) { + console.log('paste') + return this.context.drawImage(copy, 0, 0, rect.w, rect.h, rect.x, rect.y, rect.w, rect.h) + } + this.resizeImage = function (src, dst, type = 'image/png', quality = 1.0) { return new Promise(resolve => { const tmp = new Image()