Added lineWidth support.

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.