Skip to content

Instantly share code, notes, and snippets.

@mattattui

mattattui/index.html

Last active October 24, 2020 11:28
Show Gist options
  • Save mattattui/b70df31102c298122b0da25829647b37 to your computer and use it in GitHub Desktop.
Save mattattui/b70df31102c298122b0da25829647b37 to your computer and use it in GitHub Desktop.
Download ZIP
Vue + Paper
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shape selection</title>
<!-- Vue for doing stuff-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- Paper for handling graphics -->
<script src="https://unpkg.com/[email protected]/dist/paper-full.min.js"></script>
<!-- Axios for making API calls -->
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<style>
#view {
border: 1px solid red;
width: 100%;
height: 100%;
}
.container {
display: flex;
}
.controls {
flex: 0 0 25%;
}
.paperview {
flex: 1 1 auto;
}
</style>
</head>
<body>
<div class="container">
<!-- Everything in this DIV is the template Vue will use to make the app -->
<div id="app" class="controls">
<div>
<button @click="save">Save JSON to console</button><br>
<button @click="load">Load JSON from API</button><br>
<button @click="addLayer">Add a layer</button>
</div>
<div>
Layers
<ul><!-- Loop through Paper's layers and show name, id, and a button to select it -->
<li v-for="layer in paper.project.layers">
<button @click="selectLayer(layer)">select</button>
id: {{ layer.id }},
name: {{ layer.name }}</li>
</ul>
</div>
</div>
<!-- This is the canvas controlled by Paper.JS -->
<div class="paperview">
<canvas resize id="view"></canvas>
</div>
</div>
<!-- This is the Vue app -->
<script>
new Vue({
el: '#app', // Bind the app to the div with id "app"
data: {
imagePath: '',
paper: null, // Our Paper instance
},
// The "created" function runs when the page loads
created() {
// Create and store the Paper instance in a Vue variable (this.paper)
this.paper = paper.setup(document.getElementById('view'));
},
methods: {
// Dump the current Paper project as a JSON string to the console (you can set asString false and use axios.post() to send it to an API)
save() {
console.log(this.paper.project.exportJSON({
asString: true
}))
},
// Clear the current Paper project and load JSON into it
load() {
axios.get('data/saved.json').then((response) => {
this.paper.project.clear()
this.paper.project.importJSON(response.data)
})
},
// Create a new random layer
addLayer() {
var centerX = Math.round(Math.random() * (this.paper.view.size.width - 10))
var centerY = Math.round(Math.random() * (this.paper.view.size.height - 10))
var layer = new paper.Layer(new paper.Path.Circle({
center: new paper.Point(centerX, centerY),
radius: 10,
strokeColor: new paper.Color(0, 1, 0)
}));
},
selectLayer(layer) {
// Deselect all layers
this.paper.project.layers.forEach((l) => {
l.selected = false;
})
// Select the given layer
layer.selected = true;
}
}
})
</script>
</body>
</html>
Raw
saved.json
[
[
"Layer",
{
"applyMatrix": true,
"children": [
[
"Raster",
{
"applyMatrix": false,
"crossOrigin": "",
"source": "images/example.jpg"
}
]
]
}
],
[
"Layer",
{
"applyMatrix": true,
"children": [
[
"Path",
{
"applyMatrix": true,
"segments": [
[
[
79,
32
],
[
0,
5.52285
],
[
0,
-5.52285
]
],
[
[
89,
22
],
[
-5.52285,
0
],
[
5.52285,
0
]
],
[
[
99,
32
],
[
0,
-5.52285
],
[
0,
5.52285
]
],
[
[
89,
42
],
[
5.52285,
0
],
[
-5.52285,
0
]
]
],
"closed": true,
"strokeColor": [
0,
1,
0
]
}
]
]
}
],
[
"Layer",
{
"applyMatrix": true,
"children": [
[
"Path",
{
"applyMatrix": true,
"segments": [
[
[
39,
5
],
[
0,
5.52285
],
[
0,
-5.52285
]
],
[
[
49,
-5
],
[
-5.52285,
0
],
[
5.52285,
0
]
],
[
[
59,
5
],
[
0,
-5.52285
],
[
0,
5.52285
]
],
[
[
49,
15
],
[
5.52285,
0
],
[
-5.52285,
0
]
]
],
"closed": true,
"strokeColor": [
0,
1,
0
]
}
]
]
}
],
[
"Layer",
{
"applyMatrix": true,
"children": [
[
"Path",
{
"applyMatrix": true,
"segments": [
[
[
73,
8
],
[
0,
5.52285
],
[
0,
-5.52285
]
],
[
[
83,
-2
],
[
-5.52285,
0
],
[
5.52285,
0
]
],
[
[
93,
8
],
[
0,
-5.52285
],
[
0,
5.52285
]
],
[
[
83,
18
],
[
5.52285,
0
],
[
-5.52285,
0
]
]
],
"closed": true,
"strokeColor": [
0,
1,
0
]
}
]
]
}
],
[
"Layer",
{
"applyMatrix": true,
"children": [
[
"Path",
{
"applyMatrix": true,
"segments": [
[
[
58,
70
],
[
0,
5.52285
],
[
0,
-5.52285
]
],
[
[
68,
60
],
[
-5.52285,
0
],
[
5.52285,
0
]
],
[
[
78,
70
],
[
0,
-5.52285
],
[
0,
5.52285
]
],
[
[
68,
80
],
[
5.52285,
0
],
[
-5.52285,
0
]
]
],
"closed": true,
"strokeColor": [
0,
1,
0
]
}
]
]
}
],
[
"Layer",
{
"applyMatrix": true,
"children": [
[
"Path",
{
"applyMatrix": true,
"segments": [
[
[
25,
16
],
[
0,
5.52285
],
[
0,
-5.52285
]
],
[
[
35,
6
],
[
-5.52285,
0
],
[
5.52285,
0
]
],
[
[
45,
16
],
[
0,
-5.52285
],
[
0,
5.52285
]
],
[
[
35,
26
],
[
5.52285,
0
],
[
-5.52285,
0
]
]
],
"closed": true,
"strokeColor": [
0,
1,
0
]
}
]
]
}
],
[
"Layer",
{
"applyMatrix": true,
"children": [
[
"Path",
{
"applyMatrix": true,
"segments": [
[
[
8,
21
],
[
0,
5.52285
],
[
0,
-5.52285
]
],
[
[
18,
11
],
[
-5.52285,
0
],
[
5.52285,
0
]
],
[
[
28,
21
],
[
0,
-5.52285
],
[
0,
5.52285
]
],
[
[
18,
31
],
[
5.52285,
0
],
[
-5.52285,
0
]
]
],
"closed": true,
"strokeColor": [
0,
1,
0
]
}
]
]
}
],
[
"Layer",
{
"applyMatrix": true,
"selected": true,
"children": [
[
"Path",
{
"applyMatrix": true,
"selected": true,
"segments": [
[
[
87,
40
],
[
0,
5.52285
],
[
0,
-5.52285
]
],
[
[
97,
30
],
[
-5.52285,
0
],
[
5.52285,
0
]
],
[
[
107,
40
],
[
0,
-5.52285
],
[
0,
5.52285
]
],
[
[
97,
50
],
[
5.52285,
0
],
[
-5.52285,
0
]
]
],
"closed": true,
"strokeColor": [
0,
1,
0
]
}
]
]
}
]
]
@mattattui
Copy link
Author

This should work in pretty much everything except IE11, which doesn't support arrow functions, Promises, or a bunch of other stuff newer than about 2012.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment