|
|
|
<template>
|
|
|
|
<img src="~asset/img/1.jpg" alt="" srcset="" width="800px">
|
|
|
|
<div>
|
|
|
|
<img src="~asset/img/1.jpg" alt="" srcset="" width="800px">
|
|
|
|
<canvas id="myCanvas" resize></canvas>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import * as paper from 'paper'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
created() {
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
var canvas = document.getElementById('myCanvas');
|
|
|
|
// Create an empty project and a view for the canvas:
|
|
|
|
|
|
|
|
console.log(this.$paper)
|
|
|
|
console.log(this.$bus)
|
|
|
|
|
|
|
|
paper.setup(canvas);
|
|
|
|
// Create a Paper.js Path to draw a line into it:
|
|
|
|
var path = new paper.Path();
|
|
|
|
// Give the stroke a color
|
|
|
|
path.strokeColor = 'black';
|
|
|
|
var start = new paper.Point(100, 100);
|
|
|
|
// Move to start and draw a line from there
|
|
|
|
path.moveTo(start);
|
|
|
|
// Note that the plus operator on Point objects does not work
|
|
|
|
// in JavaScript. Instead, we need to call the add() function:
|
|
|
|
path.lineTo(start.add([ 200, -50 ]));
|
|
|
|
// Draw the view now:
|
|
|
|
paper.view.draw();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
...
|
...
|
|
