From b068fd176ff4ec2a7b436eabfdd22b786d8bd654 Mon Sep 17 00:00:00 2001 From: Uwe Oestermeier Date: Mon, 17 Feb 2020 16:18:55 +0100 Subject: [PATCH] Added lineWidth support. --- dist/iwmlib.pixi.js | 26 +++++++++++++++----------- lib/pixi/stylus.js | 26 +++++++++++++++----------- 2 files changed, 30 insertions(+), 22 deletions(-) diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 950aa8f..0c61104 100644 --- a/dist/iwmlib.pixi.js +++ b/dist/iwmlib.pixi.js @@ -14607,7 +14607,9 @@ backgroundFill = 0xffffff, colorAlpha = 1, captureEvents = true, - acceptMouseEvents = true + acceptMouseEvents = true, + lineWidth = 16, + minStrokeLength = 4 } = {}) { super(); this.activePointers = 0; @@ -14626,7 +14628,8 @@ this.undoCommandStack = []; this.strokes = []; this.stroke = []; - this.minStrokeLength = 4; + this.lineWidth = lineWidth; + this.minStrokeLength = minStrokeLength; if (captureEvents) this.registerEventHandler(acceptMouseEvents); this.drawBackground(); } @@ -14800,7 +14803,8 @@ pressure: event.pressure || null, tiltX: this.tiltX, tiltY: this.tiltY, - color: this.color + color: this.color, + lineWidth: this.tiltToLineWidth(this.tiltY) }; return desc } @@ -14824,7 +14828,7 @@ } tiltToLineWidth(value) { - return 16 //Math.round(Math.abs(value / 10) + 1) + return this.lineWidth * Math.round(Math.abs(value / 10) + 1) } drawStroke(stroke) { @@ -14832,11 +14836,11 @@ let start = stroke[0]; this.beginFill(0, 0); this.moveTo(start.x, start.y); - let lineWidth = this.tiltToLineWidth(start.tiltY); + let lineWidth = start.lineWidth; this.lineStyle(lineWidth, start.color, this.colorAlpha); for (let i = 1; i < stroke.length; i++) { let info = stroke[i]; - let lw = this.tiltToLineWidth(info.tiltY); + let lw = info.lineWidth; if (lw != lineWidth) { lineWidth = lw; this.lineStyle(lineWidth, info.color, this.colorAlpha); @@ -14855,7 +14859,7 @@ drawStrokes() { this.drawBackground(); - this.lineStyle(1.0, 0xff0000, 1); + this.lineStyle(this.lineWidth, 0xff0000, 1); for (let stroke of this.iterStrokes()) { this.drawStroke(stroke); } @@ -14883,17 +14887,17 @@ } normalizeInfo(info) { - let { x, y, pressure, tiltX, tiltY, color } = info; + let { x, y, pressure, tiltX, tiltY, color, lineWidth } = info; x /= this.wantedWidth; y /= this.wantedHeight; - return { x, y, pressure, tiltX, tiltY, color } + return { x, y, pressure, tiltX, tiltY, color, lineWidth } } denormalizeInfo(info) { - let { x, y, pressure, tiltX, tiltY, color } = info; + let { x, y, pressure, tiltX, tiltY, color, lineWidth } = info; x = x * this.wantedWidth; y = y * this.wantedHeight; - return { x, y, pressure, tiltX, tiltY, color } + return { x, y, pressure, tiltX, tiltY, color, lineWidth } } // Convert strokes into an object that can be stored in an Indexed DB. diff --git a/lib/pixi/stylus.js b/lib/pixi/stylus.js index ba14349..fe81ef2 100755 --- a/lib/pixi/stylus.js +++ b/lib/pixi/stylus.js @@ -80,7 +80,9 @@ export default class Stylus extends PIXI.Graphics { backgroundFill = 0xffffff, colorAlpha = 1, captureEvents = true, - acceptMouseEvents = true + acceptMouseEvents = true, + lineWidth = 16, + minStrokeLength = 4 } = {}) { super() this.activePointers = 0 @@ -99,7 +101,8 @@ export default class Stylus extends PIXI.Graphics { this.undoCommandStack = [] this.strokes = [] this.stroke = [] - this.minStrokeLength = 4 + this.lineWidth = lineWidth + this.minStrokeLength = minStrokeLength if (captureEvents) this.registerEventHandler(acceptMouseEvents) this.drawBackground() } @@ -273,7 +276,8 @@ export default class Stylus extends PIXI.Graphics { pressure: event.pressure || null, tiltX: this.tiltX, tiltY: this.tiltY, - color: this.color + color: this.color, + lineWidth: this.tiltToLineWidth(this.tiltY) } return desc } @@ -297,7 +301,7 @@ export default class Stylus extends PIXI.Graphics { } tiltToLineWidth(value) { - return 16 //Math.round(Math.abs(value / 10) + 1) + return this.lineWidth * Math.round(Math.abs(value / 10) + 1) } drawStroke(stroke) { @@ -305,11 +309,11 @@ export default class Stylus extends PIXI.Graphics { let start = stroke[0] this.beginFill(0, 0) this.moveTo(start.x, start.y) - let lineWidth = this.tiltToLineWidth(start.tiltY) + let lineWidth = start.lineWidth this.lineStyle(lineWidth, start.color, this.colorAlpha) for (let i = 1; i < stroke.length; i++) { let info = stroke[i] - let lw = this.tiltToLineWidth(info.tiltY) + let lw = info.lineWidth if (lw != lineWidth) { lineWidth = lw this.lineStyle(lineWidth, info.color, this.colorAlpha) @@ -328,7 +332,7 @@ export default class Stylus extends PIXI.Graphics { drawStrokes() { this.drawBackground() - this.lineStyle(1.0, 0xff0000, 1) + this.lineStyle(this.lineWidth, 0xff0000, 1) for (let stroke of this.iterStrokes()) { this.drawStroke(stroke) } @@ -356,17 +360,17 @@ export default class Stylus extends PIXI.Graphics { } normalizeInfo(info) { - let { x, y, pressure, tiltX, tiltY, color } = info + let { x, y, pressure, tiltX, tiltY, color, lineWidth } = info x /= this.wantedWidth y /= this.wantedHeight - return { x, y, pressure, tiltX, tiltY, color } + return { x, y, pressure, tiltX, tiltY, color, lineWidth } } denormalizeInfo(info) { - let { x, y, pressure, tiltX, tiltY, color } = info + let { x, y, pressure, tiltX, tiltY, color, lineWidth } = info x = x * this.wantedWidth y = y * this.wantedHeight - return { x, y, pressure, tiltX, tiltY, color } + return { x, y, pressure, tiltX, tiltY, color, lineWidth } } // Convert strokes into an object that can be stored in an Indexed DB.