javascript clip paper.js

by Nick Hulea

HTML

<script src="http://cdn.eyahuska.com/paper.js"></script>
<canvas id="canvas" width="500" height="500"></canvas>
<img width="512" height="512" id="image" style="display: none;" src="http://cache.gawkerassets.com/assets/images/4/2011/11/2b012384e8ac0c2549d0f303037541be.jpg" />
<img width="512" height="512" id="image2" style="display: none;" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcQK-XptdLlrJthzM5j_KJXcAQSRF0ALw6fH61QrxG9xtkgLLsx06w" />

JavaScript

// setting up...
var canvas = document.getElementById('canvas');
paper.install(window);
paper.setup(canvas);

// Global Variables
var layer = project.activeLayer,
    width, height, center;


var Photo = Base.extend({

    initialize: function (position, image) {

        // Add a new layer for this shape and make
        // it active so any new paths get built here.
        this.layer = new Layer();
        this.layer.activate();

        // save position
        this.position = position;

        // Main rectangle builder.
        this.rectangle = new Rectangle(new Point(0, 0), new Point(300, 200));

        // the mask for this shape.
        this.mask = new Path.Rectangle(this.rectangle);
        this.mask.selected = true;

        // the image to be cropped.
        this.raster = new Raster(image);

        // positioning
        this.mask.position = this.position;
        this.raster.position = this.position;

        // HERE!
        // creates a clip group and clips the first child???
        this.clipGroup = new Group(this.mask, this.raster);
        this.clipGroup.clipped = true;

    }

});


// Let's create two example images...
new Photo([20, 220], 'image');
new Photo([102, 20], 'image2');

view.onFrame = function (event) {
    //
};

function onResize(event) {
    ///circle.fitBounds(view.bounds, true);
    raster.fitBounds(view.bounds, true);
    raster2.fitBounds(view.bounds, true);
}