<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PIXI Stylus</title>
<link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
<link rel="stylesheet" href="../../css/doctest.css">
<script src="../3rdparty/highlight/highlight.pack.js"></script>
<script src="../../dist/iwmlib.3rdparty.js"></script>
<script src="../../dist/iwmlib.js"></script>
<script src="../../dist/iwmlib.pixi.js"></script>
</head>
<body onload="Doctest.run()">
<h1>Stylus</h1>
<p>The Stylus class extends the PIXI.Graphics class and allows to draw into
a graphics object. Select the pen tool in the following example app and draw into the canvas.
</p>
<canvas id="canvas" style="border: 1px solid gray; width: 640px; height: 480px;" class="interactive"></canvas>
<p>
What you should see: A blank sytlus canvas.
</p>
<script class="doctest">
class StylusApp extends PIXIApp {
sceneFactory() {
return new Stylus(this.renderer)
}
setup() {
let buttonColor = 0x666666
super.setup()
this.tools = new ButtonGroup({
type: 'checkbox',
margin: 0,
x: 16,
y: 16,
fill: buttonColor,
buttons: [{
icon: 'edit',
iconColorActive: 0xFFFF00,
action: (event, button) => this.toggleEditMode()
},
{
icon: 'undo',
action: (event, button) => this.undo(button)
},
{
icon: 'redo',
action: (event, button) => this.redo(button)
},
{
icon: 'delete',
action: (event, button) => this.clear(button)
}
]
})
this.scene.addChild(this.tools)
let defaults = {
icon: 'brightness_1',
action: (event, button) => this.selectColor(button),
fillAlpha: 0,
strokeAlpha: 0,
fillActiveAlpha: 0,
strokeActiveAlpha: 0
}
this.palette = new ButtonGroup({
type: "radio",
x: 200,
y: 16,
margin: 0,
strokeAlpha: 0,
fill: buttonColor,
buttons: [
Object.assign({}, defaults, {
iconColor: 0x111111,
iconColorActive: 0x111111
}), // tooltip: "Black",
Object.assign({}, defaults, {
iconColor: 0xFFFF00,
iconColorActive: 0xFFFF00
}), // tooltip: "Yellow",
Object.assign({}, defaults, {
iconColor: 0x00FF00,
iconColorActive: 0x00FF00
}), // tooltip: "Green",
Object.assign({}, defaults, {
iconColor: 0xFF00FF,
iconColorActive: 0xFF00FF
}) // tooltip: "Violet",
]
})
this.scene.addChild(this.palette)
this.scene.interactive = false
}
toggleEditMode() {
this.scene.interactive = !this.scene.interactive
console.log("this.scene.interactive")
}
selectColor(button) {
this.scene.color = button.opts.iconColor
}
undo(button) {
this.scene.undo()
setTimeout(() => {
button.active = false
}, 200)
}
redo(button) {
this.scene.redo()
setTimeout(() => {
button.active = false
}, 200)
}
clear(button) {
this.scene.clearAll()
setTimeout(() => {
button.active = false
}, 200)
}
}
const app = new StylusApp({
view: canvas,
width: 640,
height: 480,
autoResize: false
})
window.app = app
app.setup()
app.run()
</script>
<h2>
References
</h2>
<ul>
<li><a href="https://mattdesl.svbtle.com/drawing-lines-is-hard">Drawing Lines is Hard</a></li>
<li><a href="http://perfectionkills.com/exploring-canvas-drawing-techniques/">Exploring Canvas Drawing
Techniques</a></li>
<li><a href="https://github.com/mattdesl/polyline-normals">Polyline Normals</a></li>
</ul>
</body>