IWMBrowser/iwmlib
IWMBrowser
/
iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Added lineWidth support.

This commit is contained in:
Uwe Oestermeier 2020-02-17 16:18:55 +01:00
parent 54b685ab42
commit b068fd176f
2 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
dist/iwmlib.pixi.js vendored
View File

@ -14607,7 +14607,9 @@
backgroundFill = 0xffffff, backgroundFill = 0xffffff,
colorAlpha = 1, colorAlpha = 1,
captureEvents = true, captureEvents = true,
acceptMouseEvents = true acceptMouseEvents = true,
lineWidth = 16,
minStrokeLength = 4
} = {}) { } = {}) {
super(); super();
this.activePointers = 0; this.activePointers = 0;
@ -14626,7 +14628,8 @@
this.undoCommandStack = []; this.undoCommandStack = [];
this.strokes = []; this.strokes = [];
this.stroke = []; this.stroke = [];
this.minStrokeLength = 4; this.lineWidth = lineWidth;
this.minStrokeLength = minStrokeLength;
if (captureEvents) this.registerEventHandler(acceptMouseEvents); if (captureEvents) this.registerEventHandler(acceptMouseEvents);
this.drawBackground(); this.drawBackground();
} }
@ -14800,7 +14803,8 @@
pressure: event.pressure || null, pressure: event.pressure || null,
tiltX: this.tiltX, tiltX: this.tiltX,
tiltY: this.tiltY, tiltY: this.tiltY,
color: this.color color: this.color,
lineWidth: this.tiltToLineWidth(this.tiltY)
}; };
return desc return desc
} }
@ -14824,7 +14828,7 @@
} }
tiltToLineWidth(value) { tiltToLineWidth(value) {
return 16 //Math.round(Math.abs(value / 10) + 1) return this.lineWidth * Math.round(Math.abs(value / 10) + 1)
} }
drawStroke(stroke) { drawStroke(stroke) {
@ -14832,11 +14836,11 @@
let start = stroke[0]; let start = stroke[0];
this.beginFill(0, 0); this.beginFill(0, 0);
this.moveTo(start.x, start.y); this.moveTo(start.x, start.y);
let lineWidth = this.tiltToLineWidth(start.tiltY); let lineWidth = start.lineWidth;
this.lineStyle(lineWidth, start.color, this.colorAlpha); this.lineStyle(lineWidth, start.color, this.colorAlpha);
for (let i = 1; i < stroke.length; i++) { for (let i = 1; i < stroke.length; i++) {
let info = stroke[i]; let info = stroke[i];
let lw = this.tiltToLineWidth(info.tiltY); let lw = info.lineWidth;
if (lw != lineWidth) { if (lw != lineWidth) {
lineWidth = lw; lineWidth = lw;
this.lineStyle(lineWidth, info.color, this.colorAlpha); this.lineStyle(lineWidth, info.color, this.colorAlpha);
@ -14855,7 +14859,7 @@
drawStrokes() { drawStrokes() {
this.drawBackground(); this.drawBackground();
this.lineStyle(1.0, 0xff0000, 1); this.lineStyle(this.lineWidth, 0xff0000, 1);
for (let stroke of this.iterStrokes()) { for (let stroke of this.iterStrokes()) {
this.drawStroke(stroke); this.drawStroke(stroke);
} }
@ -14883,17 +14887,17 @@
} }
normalizeInfo(info) { normalizeInfo(info) {
let { x, y, pressure, tiltX, tiltY, color } = info; let { x, y, pressure, tiltX, tiltY, color, lineWidth } = info;
x /= this.wantedWidth; x /= this.wantedWidth;
y /= this.wantedHeight; y /= this.wantedHeight;
return { x, y, pressure, tiltX, tiltY, color } return { x, y, pressure, tiltX, tiltY, color, lineWidth }
} }
denormalizeInfo(info) { denormalizeInfo(info) {
let { x, y, pressure, tiltX, tiltY, color } = info; let { x, y, pressure, tiltX, tiltY, color, lineWidth } = info;
x = x * this.wantedWidth; x = x * this.wantedWidth;
y = y * this.wantedHeight; 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. // Convert strokes into an object that can be stored in an Indexed DB.

26
lib/pixi/stylus.js
View File

@ -80,7 +80,9 @@ export default class Stylus extends PIXI.Graphics {
backgroundFill = 0xffffff, backgroundFill = 0xffffff,
colorAlpha = 1, colorAlpha = 1,
captureEvents = true, captureEvents = true,
acceptMouseEvents = true acceptMouseEvents = true,
lineWidth = 16,
minStrokeLength = 4
} = {}) { } = {}) {
super() super()
this.activePointers = 0 this.activePointers = 0
@ -99,7 +101,8 @@ export default class Stylus extends PIXI.Graphics {
this.undoCommandStack = [] this.undoCommandStack = []
this.strokes = [] this.strokes = []
this.stroke = [] this.stroke = []
this.minStrokeLength = 4 this.lineWidth = lineWidth
this.minStrokeLength = minStrokeLength
if (captureEvents) this.registerEventHandler(acceptMouseEvents) if (captureEvents) this.registerEventHandler(acceptMouseEvents)
this.drawBackground() this.drawBackground()
} }
@ -273,7 +276,8 @@ export default class Stylus extends PIXI.Graphics {
pressure: event.pressure || null, pressure: event.pressure || null,
tiltX: this.tiltX, tiltX: this.tiltX,
tiltY: this.tiltY, tiltY: this.tiltY,
color: this.color color: this.color,
lineWidth: this.tiltToLineWidth(this.tiltY)
} }
return desc return desc
} }
@ -297,7 +301,7 @@ export default class Stylus extends PIXI.Graphics {
} }
tiltToLineWidth(value) { tiltToLineWidth(value) {
return 16 //Math.round(Math.abs(value / 10) + 1) return this.lineWidth * Math.round(Math.abs(value / 10) + 1)
} }
drawStroke(stroke) { drawStroke(stroke) {
@ -305,11 +309,11 @@ export default class Stylus extends PIXI.Graphics {
let start = stroke[0] let start = stroke[0]
this.beginFill(0, 0) this.beginFill(0, 0)
this.moveTo(start.x, start.y) this.moveTo(start.x, start.y)
let lineWidth = this.tiltToLineWidth(start.tiltY) let lineWidth = start.lineWidth
this.lineStyle(lineWidth, start.color, this.colorAlpha) this.lineStyle(lineWidth, start.color, this.colorAlpha)
for (let i = 1; i < stroke.length; i++) { for (let i = 1; i < stroke.length; i++) {
let info = stroke[i] let info = stroke[i]
let lw = this.tiltToLineWidth(info.tiltY) let lw = info.lineWidth
if (lw != lineWidth) { if (lw != lineWidth) {
lineWidth = lw lineWidth = lw
this.lineStyle(lineWidth, info.color, this.colorAlpha) this.lineStyle(lineWidth, info.color, this.colorAlpha)
@ -328,7 +332,7 @@ export default class Stylus extends PIXI.Graphics {
drawStrokes() { drawStrokes() {
this.drawBackground() this.drawBackground()
this.lineStyle(1.0, 0xff0000, 1) this.lineStyle(this.lineWidth, 0xff0000, 1)
for (let stroke of this.iterStrokes()) { for (let stroke of this.iterStrokes()) {
this.drawStroke(stroke) this.drawStroke(stroke)
} }
@ -356,17 +360,17 @@ export default class Stylus extends PIXI.Graphics {
} }
normalizeInfo(info) { normalizeInfo(info) {
let { x, y, pressure, tiltX, tiltY, color } = info let { x, y, pressure, tiltX, tiltY, color, lineWidth } = info
x /= this.wantedWidth x /= this.wantedWidth
y /= this.wantedHeight y /= this.wantedHeight
return { x, y, pressure, tiltX, tiltY, color } return { x, y, pressure, tiltX, tiltY, color, lineWidth }
} }
denormalizeInfo(info) { denormalizeInfo(info) {
let { x, y, pressure, tiltX, tiltY, color } = info let { x, y, pressure, tiltX, tiltY, color, lineWidth } = info
x = x * this.wantedWidth x = x * this.wantedWidth
y = y * this.wantedHeight 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. // Convert strokes into an object that can be stored in an Indexed DB.