From 3bdb1fff1f7d274711790ac015dd2b3a1faa286d Mon Sep 17 00:00:00 2001 From: Christopher Willis-Ford Date: Thu, 19 Jan 2017 11:22:32 -0800 Subject: [PATCH] Small changes & fixes from VM integration Changes include: - Implement pen clear - Upack pen-related location parameters - Fix inverted vertical position on pen actions - Remove canvas debug content - Set `strokeStyle` instead of `fillStyle` - Remove location parameter from stamp operation: always stamp in place --- src/PenSkin.js | 65 ++++++++++++++++++++-------------------------- src/RenderWebGL.js | 38 +++++++++++++++++++-------- 2 files changed, 55 insertions(+), 48 deletions(-) diff --git a/src/PenSkin.js b/src/PenSkin.js index 2e37781..c222b81 100644 --- a/src/PenSkin.js +++ b/src/PenSkin.js @@ -84,39 +84,51 @@ class PenSkin extends Skin { } /** - * Draw a point on the pen layer. - * @param {[number, number]} location - where the point should be drawn. - * @param {PenAttributes} penAttributes - how the point should be drawn. + * Clear the pen layer. */ - drawPoint (location, penAttributes) { - // Canvas renders a zero-length line as two end-caps back-to-back, which is what we want. - this.drawLine(location, location, penAttributes); + clear () { + const ctx = this._canvas.getContext('2d'); + ctx.clearRect(0, 0, this._canvas.width, this._canvas.height); } /** * Draw a point on the pen layer. - * @param {[number, number]} location0 - where the line should start. - * @param {[number, number]} location1 - where the line should end. - * @param {PenAttributes} penAttributes - how the line should be drawn. + * @param {PenAttributes} penAttributes - how the point should be drawn. + * @param {number} x - the X coordinate of the point to draw. + * @param {number} y - the Y coordinate of the point to draw. */ - drawLine (location0, location1, penAttributes) { + drawPoint (penAttributes, x, y) { + // Canvas renders a zero-length line as two end-caps back-to-back, which is what we want. + this.drawLine(penAttributes, x, y, x, y); + } + + /** + * Draw a point on the pen layer. + * @param {PenAttributes} penAttributes - how the line should be drawn. + * @param {number} x0 - the X coordinate of the beginning of the line. + * @param {number} y0 - the Y coordinate of the beginning of the line. + * @param {number} x1 - the X coordinate of the end of the line. + * @param {number} y1 - the Y coordinate of the end of the line. + */ + drawLine (penAttributes, x0, y0, x1, y1) { const ctx = this._canvas.getContext('2d'); this._setAttributes(ctx, penAttributes); - ctx.moveTo(location0[0] + this._rotationCenter[0], location0[1] + this._rotationCenter[1]); ctx.beginPath(); - ctx.lineTo(location1[0] + this._rotationCenter[0], location1[1] + this._rotationCenter[1]); + ctx.moveTo(this._rotationCenter[0] + x0, this._rotationCenter[1] - y0); + ctx.lineTo(this._rotationCenter[0] + x1, this._rotationCenter[1] - y1); ctx.stroke(); this._canvasDirty = true; } /** * Stamp an image onto the pen layer. - * @param {[number, number]} location - where the stamp should be drawn. * @param {HTMLCanvasElement|HTMLImageElement|HTMLVideoElement} stampElement - the element to use as the stamp. + * @param {number} x - the X coordinate of the stamp to draw. + * @param {number} y - the Y coordinate of the stamp to draw. */ - drawStamp (location, stampElement) { + drawStamp (stampElement, x, y) { const ctx = this._canvas.getContext('2d'); - ctx.drawImage(stampElement, location[0] + this._rotationCenter[0], location[1] + this._rotationCenter[1]); + ctx.drawImage(stampElement, this._rotationCenter[0] + x, this._rotationCenter[1] - y); this._canvasDirty = true; } @@ -152,27 +164,6 @@ class PenSkin extends Skin { } ); this._canvasDirty = true; - - const ctx = this._canvas.getContext('2d'); - ctx.strokeStyle = 'red'; - ctx.beginPath(); - ctx.moveTo(-2, 0); - ctx.lineTo(width - 2, height); - ctx.stroke(); - ctx.strokeStyle = 'green'; - ctx.beginPath(); - ctx.moveTo(0, 0); - ctx.lineTo(width + 0, height); - ctx.stroke(); - ctx.strokeStyle = 'blue'; - ctx.beginPath(); - ctx.moveTo(2, 0); - ctx.lineTo(width + 2, height); - ctx.stroke(); - ctx.strokeStyle = 'purple'; - ctx.moveTo(2, height / 10); - ctx.lineTo(width / 10, height / 5); - ctx.stroke(); } _setAttributes (context, penAttributes) { @@ -185,7 +176,7 @@ class PenSkin extends Skin { const b = Math.round(color4f[2] * 255); const a = Math.round(color4f[3] * 255); - context.fillStyle = `rgba(${r},${g},${b},${a})`; + context.strokeStyle = `rgba(${r},${g},${b},${a})`; context.lineCap = 'round'; context.lineWidth = diameter; } diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js index 7d13eef..9d7f99e 100644 --- a/src/RenderWebGL.js +++ b/src/RenderWebGL.js @@ -732,36 +732,52 @@ class RenderWebGL extends EventEmitter { drawable.updateProperties(properties); } + /** + * Clear a pen layer. + * @param {int} penSkinID - the unique ID of a Pen Skin. + */ + penClear (penSkinID) { + const skin = /** @type {PenSkin} */ this._allSkins[penSkinID]; + skin.clear(); + } + /** * Draw a point on a pen layer. * @param {int} penSkinID - the unique ID of a Pen Skin. - * @param {[number, number]} location - where the point should be drawn. * @param {PenAttributes} penAttributes - how the point should be drawn. + * @param {number} x - the X coordinate of the point to draw. + * @param {number} y - the Y coordinate of the point to draw. */ - penPoint (penSkinID, location, penAttributes) { + penPoint (penSkinID, penAttributes, x, y) { const skin = /** @type {PenSkin} */ this._allSkins[penSkinID]; - skin.drawPoint(location, penAttributes); + skin.drawPoint(penAttributes, x, y); } /** * Draw a line on a pen layer. * @param {int} penSkinID - the unique ID of a Pen Skin. - * @param {[number, number]} location0 - where the line should start. - * @param {[number, number]} location1 - where the line should end. * @param {PenAttributes} penAttributes - how the line should be drawn. + * @param {number} x0 - the X coordinate of the beginning of the line. + * @param {number} y0 - the Y coordinate of the beginning of the line. + * @param {number} x1 - the X coordinate of the end of the line. + * @param {number} y1 - the Y coordinate of the end of the line. */ - penLine (penSkinID, location0, location1, penAttributes) { + penLine (penSkinID, penAttributes, x0, y0, x1, y1) { const skin = /** @type {PenSkin} */ this._allSkins[penSkinID]; - skin.drawLine(location0, location1, penAttributes); + skin.drawLine(penAttributes, x0, y0, x1, y1); } /** - * Draw a point on a pen layer. + * Stamp a Drawable onto a pen layer. * @param {int} penSkinID - the unique ID of a Pen Skin. - * @param {[number, number]} location - where the point should be drawn. * @param {int} stampID - the unique ID of the Drawable to use as the stamp. */ - penStamp (penSkinID, location, stampID) { + penStamp (penSkinID, stampID) { + const stampDrawable = this._allDrawables[stampID]; + if (!stampDrawable) { + return; + } + const bounds = this._touchingBounds(stampID); if (!bounds) { return; @@ -798,7 +814,7 @@ class RenderWebGL extends EventEmitter { stampImageData.data.set(stampPixels); stampContext.putImageData(stampImageData, 0, 0); - skin.drawStamp(location, stampCanvas); + skin.drawStamp(stampCanvas, bounds.left, bounds.top); } /* ******