2023-05-09 13:25:39 +02:00
|
|
|
<!DOCTYPE html>
|
2019-07-04 09:09:19 +02:00
|
|
|
<html lang="en">
|
2023-05-09 13:25:39 +02:00
|
|
|
<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><a href="../index.html">lib.</a><a href="index.html">pixi.</a>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)
|
|
|
|
|
}
|
2019-07-04 09:09:19 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
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
|
2019-07-04 09:09:19 +02:00
|
|
|
}
|
2023-05-09 13:25:39 +02:00
|
|
|
|
|
|
|
|
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
|
2019-07-04 09:09:19 +02:00
|
|
|
}
|
|
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
toggleEditMode() {
|
|
|
|
|
this.scene.interactive = !this.scene.interactive
|
2019-07-04 09:09:19 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
console.log('this.scene.interactive')
|
|
|
|
|
}
|
2019-07-04 09:09:19 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
selectColor(button) {
|
|
|
|
|
this.scene.color = button.opts.iconColor
|
|
|
|
|
}
|
2019-07-04 09:09:19 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
undo(button) {
|
|
|
|
|
this.scene.undo()
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
button.active = false
|
|
|
|
|
}, 200)
|
|
|
|
|
}
|
2019-07-04 09:09:19 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
redo(button) {
|
|
|
|
|
this.scene.redo()
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
button.active = false
|
|
|
|
|
}, 200)
|
|
|
|
|
}
|
2019-07-04 09:09:19 +02:00
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
clear(button) {
|
|
|
|
|
this.scene.clearAll()
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
button.active = false
|
|
|
|
|
}, 200)
|
|
|
|
|
}
|
2019-07-04 09:09:19 +02:00
|
|
|
}
|
|
|
|
|
|
2023-05-09 13:25:39 +02:00
|
|
|
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>
|
|
|
|
|
</html>
|
