vue-paperjs-division-raster

<template>
	<div class="fullscreen">
		<article>
			<div id="capture" class="paperscript">
				<div class="canvas">
					<canvas id="myCanvas" ref="myCanvas" resize="true"></canvas>
				</div>
			</div>
		</article>
	</div>
</template>
<script type="text/paperscript" canvas="myCanvas">
	import paper from 'paper'
	export default {
		name: 'Canvas',
		mounted () {
			var canvas = this.$refs.myCanvas
			paper.setup(canvas)
			var raster = new paper.Raster({
				source: 'mona.jpg',
				position: paper.view.center
			})
			var loaded = false;
			var tool = new paper.Tool();

			raster.on('load', function() {
				loaded = true;
				onResize();
			});

			// Make the raster invisible:
			raster.visible = false;

			var lastPos = paper.view.center;

			function moveHandler (event) {
					event.preventDefault()
					console.log(event)
					if (!loaded)
						return;
					if (lastPos.getDistance(event.point) < 10)
						return;

					lastPos = event.point;

					var size = raster.bounds.size.clone();
					var isLandscape = size.width > size.height;

					// If the path is in landscape orientation, we're going to
					// split the path horizontally, otherwise vertically:

					size /= isLandscape ? [2, 1] : [1, 2];

					var path = new paper.Path.Rectangle({
						point: raster.bounds.topLeft.floor(),
						size: raster.size.ceil(),
						onMouseMove: moveHandler
					});

					path.fillColor = raster.getAverageColor(path);

					console.log(path.fillColor)
					var path = new paper.Path.Rectangle({
						point: isLandscape
							? raster.bounds.topCenter.ceil()
							: raster.bounds.leftCenter.ceil(),
						size: raster.size.floor(),
						onMouseMove: moveHandler
					});

					path.fillColor = raster.getAverageColor(path);

					this.remove();
				}

			function onResize (event) {
				if (!loaded)
					return;
				raster.project.activeLayer.removeChildren();

				// Transform the raster so that it fills the bounding rectangle
				// of the view:
				raster.fitBounds(paper.view.bounds, true);

				// Create a path that fills the view, and fill it with
				// the average color of the raster:
				var path = new paper.Path.Rectangle({
					rectangle: paper.view.bounds,
					fillColor: raster.getAverageColor(paper.view.bounds),
					onMouseMove: moveHandler
				});
			}
		}
	}
</script>