156 lines
5.1 KiB
HTML
156 lines
5.1 KiB
HTML
|
<!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>
|