2011-03-06 19:50:44 -05:00
|
|
|
/*
|
2013-01-28 21:03:27 -05:00
|
|
|
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
|
2011-03-07 20:41:50 -05:00
|
|
|
* http://paperjs.org/
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2013-01-28 21:03:27 -05:00
|
|
|
* Copyright (c) 2011 - 2013, Juerg Lehni & Jonathan Puckey
|
2011-03-06 19:50:44 -05:00
|
|
|
* http://lehni.org/ & http://jonathanpuckey.com/
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-07-01 06:17:45 -04:00
|
|
|
* Distributed under the MIT license. See LICENSE file for details.
|
|
|
|
*
|
2011-03-07 20:41:50 -05:00
|
|
|
* All rights reserved.
|
2011-03-06 19:50:44 -05:00
|
|
|
*/
|
|
|
|
|
2011-06-22 18:56:05 -04:00
|
|
|
/**
|
|
|
|
* @name Raster
|
2011-07-01 05:26:51 -04:00
|
|
|
*
|
2011-06-22 18:56:05 -04:00
|
|
|
* @class The Raster item represents an image in a Paper.js project.
|
2011-07-01 05:26:51 -04:00
|
|
|
*
|
2013-04-19 19:40:30 -04:00
|
|
|
* @extends Item
|
2011-06-22 18:56:05 -04:00
|
|
|
*/
|
2013-05-27 15:48:58 -04:00
|
|
|
var Raster = Item.extend(/** @lends Raster# */{
|
2013-06-23 23:18:32 -04:00
|
|
|
_class: 'Raster',
|
2013-06-18 18:50:11 -04:00
|
|
|
_transformContent: false,
|
2013-04-19 19:40:30 -04:00
|
|
|
// Raster doesn't make the distinction between the different bounds,
|
|
|
|
// so use the same name for all of them
|
|
|
|
_boundsGetter: 'getBounds',
|
2013-02-24 18:53:37 -05:00
|
|
|
_boundsSelected: true,
|
2013-02-11 19:43:10 -05:00
|
|
|
_serializeFields: {
|
2013-02-11 20:08:23 -05:00
|
|
|
source: null
|
2013-02-11 19:43:10 -05:00
|
|
|
},
|
2011-11-24 09:44:26 -05:00
|
|
|
|
2012-12-23 19:12:41 -05:00
|
|
|
// TODO: Implement type, width, height.
|
2011-06-01 05:49:43 -04:00
|
|
|
// TODO: Have PlacedSymbol & Raster inherit from a shared class?
|
2011-05-23 10:09:04 -04:00
|
|
|
/**
|
2013-02-15 11:12:58 -05:00
|
|
|
* Creates a new raster item from the passed argument, and places it in the
|
|
|
|
* active layer. {@code object} can either be a DOM Image, a Canvas, or a
|
|
|
|
* string describing the URL to load the image from, or the ID of a DOM
|
|
|
|
* element to get the image from (either a DOM Image or a Canvas).
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2013-03-10 18:19:59 -04:00
|
|
|
* @param {HTMLImageElement|Canvas|String} [source] the source of the raster
|
|
|
|
* @param {HTMLImageElement|Canvas|String} [position] the center position at
|
2013-02-15 11:15:24 -05:00
|
|
|
* which the raster item is placed.
|
2013-03-10 18:19:59 -04:00
|
|
|
*
|
|
|
|
* @example {@paperscript height=300} // Creating a raster using a url
|
|
|
|
* var url = 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png';
|
|
|
|
* var raster = new Raster(url);
|
|
|
|
*
|
|
|
|
* // If you create a Raster using a url, you can use the onLoad
|
|
|
|
* // handler to do something once it is loaded:
|
|
|
|
* raster.onLoad = function() {
|
|
|
|
* console.log('The image has loaded.');
|
|
|
|
* };
|
|
|
|
*
|
|
|
|
* @example // Creating a raster using the id of a DOM Image:
|
|
|
|
*
|
|
|
|
* // Create a raster using the id of the image:
|
|
|
|
* var raster = new Raster('art');
|
|
|
|
*
|
|
|
|
* @example // Creating a raster using a DOM Image:
|
|
|
|
*
|
|
|
|
* // Find the element using its id:
|
|
|
|
* var imageElement = document.getElementById('art');
|
|
|
|
*
|
|
|
|
* // Create the raster:
|
|
|
|
* var raster = new Raster(imageElement);
|
|
|
|
*
|
|
|
|
* @example {@paperscript height=300}
|
|
|
|
* var raster = new Raster({
|
|
|
|
* source: 'http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png',
|
|
|
|
* position: view.center
|
|
|
|
* });
|
|
|
|
*
|
|
|
|
* raster.scale(0.5);
|
|
|
|
* raster.rotate(10);
|
2011-05-23 10:09:04 -04:00
|
|
|
*/
|
2013-05-28 16:54:47 -04:00
|
|
|
initialize: function Raster(object, position) {
|
2012-12-25 16:12:25 -05:00
|
|
|
// Support two forms of item initialization: Passing one object literal
|
2013-02-15 11:15:24 -05:00
|
|
|
// describing all the different properties to be set, or an image
|
|
|
|
// (object) and a point where it should be placed (point).
|
2013-07-21 18:45:22 -04:00
|
|
|
// If _initialize can set properties through object literal, we're done.
|
|
|
|
// Otherwise we need to check the type of object:
|
|
|
|
if (!this._initialize(object,
|
|
|
|
position !== undefined && Point.read(arguments, 1))) {
|
2013-08-14 15:29:56 -04:00
|
|
|
if (typeof object === 'string') {
|
2013-02-11 19:34:31 -05:00
|
|
|
// Both data-urls and normal urls are supported here!
|
2013-02-15 11:15:24 -05:00
|
|
|
this.setSource(object);
|
2012-12-25 16:12:25 -05:00
|
|
|
} else {
|
2013-08-14 15:29:56 -04:00
|
|
|
// #setImage() handles both canvas and image types.
|
2013-02-15 11:15:24 -05:00
|
|
|
this.setImage(object);
|
2012-12-25 16:12:25 -05:00
|
|
|
}
|
2011-02-21 12:43:56 -05:00
|
|
|
}
|
2013-03-17 12:04:56 -04:00
|
|
|
if (!this._size)
|
|
|
|
this._size = new Size();
|
2011-02-21 12:43:56 -05:00
|
|
|
},
|
2011-02-23 19:28:11 -05:00
|
|
|
|
2013-10-17 07:08:54 -04:00
|
|
|
_equals: function(item) {
|
|
|
|
return this.getSource() === item.getSource();
|
|
|
|
},
|
|
|
|
|
2013-07-19 21:27:00 -04:00
|
|
|
clone: function(insert) {
|
2013-07-19 21:42:13 -04:00
|
|
|
var param = { insert: false },
|
|
|
|
image = this._image;
|
|
|
|
if (image) {
|
|
|
|
param.image = image;
|
2013-07-21 18:45:22 -04:00
|
|
|
} else if (this._canvas) {
|
2011-05-21 06:50:02 -04:00
|
|
|
// If the Raster contains a Canvas object, we need to create
|
|
|
|
// a new one and draw this raster's canvas on it.
|
2013-07-19 21:42:13 -04:00
|
|
|
var canvas = param.canvas = CanvasProvider.getCanvas(this._size);
|
|
|
|
canvas.getContext('2d').drawImage(this._canvas, 0, 0);
|
2011-05-21 06:50:02 -04:00
|
|
|
}
|
2013-07-19 21:42:13 -04:00
|
|
|
return this._clone(new Raster(param), insert);
|
2011-05-19 16:56:49 -04:00
|
|
|
},
|
|
|
|
|
2011-02-23 19:28:11 -05:00
|
|
|
/**
|
2011-05-23 10:09:04 -04:00
|
|
|
* The size of the raster in pixels.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-23 10:09:04 -04:00
|
|
|
* @type Size
|
|
|
|
* @bean
|
|
|
|
*/
|
2011-02-23 19:28:11 -05:00
|
|
|
getSize: function() {
|
2013-06-27 19:06:11 -04:00
|
|
|
var size = this._size;
|
|
|
|
return new LinkedSize(size.width, size.height, this, 'setSize');
|
2011-02-23 19:28:11 -05:00
|
|
|
},
|
2011-03-03 17:45:17 -05:00
|
|
|
|
2013-06-27 19:06:11 -04:00
|
|
|
setSize: function(/* size */) {
|
2012-12-03 00:13:03 -05:00
|
|
|
var size = Size.read(arguments);
|
2013-03-17 12:04:56 -04:00
|
|
|
if (!this._size.equals(size)) {
|
2011-03-08 07:55:34 -05:00
|
|
|
// Get reference to image before changing canvas
|
2013-02-11 19:42:36 -05:00
|
|
|
var element = this.getElement();
|
2012-12-03 00:13:03 -05:00
|
|
|
// Setting canvas internally sets _size
|
2013-02-12 19:06:24 -05:00
|
|
|
this.setCanvas(CanvasProvider.getCanvas(size));
|
2013-02-11 19:42:36 -05:00
|
|
|
// Draw element back onto new canvas
|
2013-03-17 11:55:57 -04:00
|
|
|
if (element)
|
|
|
|
this.getContext(true).drawImage(element, 0, 0,
|
|
|
|
size.width, size.height);
|
2012-12-03 00:13:03 -05:00
|
|
|
}
|
2011-02-23 19:28:11 -05:00
|
|
|
},
|
2011-03-03 17:45:17 -05:00
|
|
|
|
2011-02-21 12:43:56 -05:00
|
|
|
/**
|
|
|
|
* The width of the raster in pixels.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-27 14:15:15 -04:00
|
|
|
* @type Number
|
2011-05-23 10:09:04 -04:00
|
|
|
* @bean
|
2011-02-21 12:43:56 -05:00
|
|
|
*/
|
|
|
|
getWidth: function() {
|
2011-02-23 19:28:11 -05:00
|
|
|
return this._size.width;
|
2011-02-21 12:43:56 -05:00
|
|
|
},
|
2011-03-03 17:45:17 -05:00
|
|
|
|
2011-02-21 12:43:56 -05:00
|
|
|
/**
|
|
|
|
* The height of the raster in pixels.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-27 14:15:15 -04:00
|
|
|
* @type Number
|
2011-05-23 10:09:04 -04:00
|
|
|
* @bean
|
2011-02-21 12:43:56 -05:00
|
|
|
*/
|
|
|
|
getHeight: function() {
|
2011-02-23 19:28:11 -05:00
|
|
|
return this._size.height;
|
2011-02-21 12:43:56 -05:00
|
|
|
},
|
2011-03-03 17:45:17 -05:00
|
|
|
|
2012-10-10 23:11:11 -04:00
|
|
|
isEmpty: function() {
|
|
|
|
return this._size.width == 0 && this._size.height == 0;
|
|
|
|
},
|
|
|
|
|
2011-02-24 07:52:27 -05:00
|
|
|
/**
|
2011-06-08 13:47:34 -04:00
|
|
|
* Pixels per inch of the raster at its current size.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-23 10:09:04 -04:00
|
|
|
* @type Size
|
|
|
|
* @bean
|
2011-02-24 07:52:27 -05:00
|
|
|
*/
|
|
|
|
getPpi: function() {
|
2011-07-01 05:32:09 -04:00
|
|
|
var matrix = this._matrix,
|
2011-03-08 07:55:34 -05:00
|
|
|
orig = new Point(0, 0).transform(matrix),
|
|
|
|
u = new Point(1, 0).transform(matrix).subtract(orig),
|
|
|
|
v = new Point(0, 1).transform(matrix).subtract(orig);
|
2013-05-28 16:54:47 -04:00
|
|
|
return new Size(
|
2011-03-04 21:40:38 -05:00
|
|
|
72 / u.getLength(),
|
|
|
|
72 / v.getLength()
|
2011-02-24 07:52:27 -05:00
|
|
|
);
|
|
|
|
},
|
2011-03-03 17:45:17 -05:00
|
|
|
|
2011-05-23 10:09:04 -04:00
|
|
|
/**
|
2013-08-14 15:29:56 -04:00
|
|
|
* The HTMLImageElement of the raster, if one is associated.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2013-08-14 15:29:56 -04:00
|
|
|
* @type HTMLImageElement|Canvas
|
2011-05-23 10:09:04 -04:00
|
|
|
* @bean
|
|
|
|
*/
|
2013-08-14 15:29:56 -04:00
|
|
|
getImage: function() {
|
|
|
|
return this._image;
|
2011-03-04 21:40:38 -05:00
|
|
|
},
|
|
|
|
|
2013-08-14 15:29:56 -04:00
|
|
|
setImage: function(image) {
|
|
|
|
if (this._canvas)
|
|
|
|
CanvasProvider.release(this._canvas);
|
|
|
|
// Due to similarities, we can handle both canvas and image types here.
|
|
|
|
if (image.getContext) {
|
|
|
|
// A canvas object
|
|
|
|
this._image = null;
|
|
|
|
this._canvas = image;
|
|
|
|
} else {
|
|
|
|
// A image object
|
|
|
|
this._image = image;
|
|
|
|
this._canvas = null;
|
|
|
|
}
|
2013-08-15 14:32:47 -04:00
|
|
|
// Both canvas and image have width / height attributes. Due to IE,
|
|
|
|
// naturalWidth / Height needs to be checked for a swell, because it
|
|
|
|
// apparently can have width / height set to 0 when the image is
|
|
|
|
// invisible in the document.
|
|
|
|
this._size = new Size(
|
|
|
|
image.naturalWidth || image.width,
|
|
|
|
image.naturalHeight || image.height);
|
2013-08-14 15:29:56 -04:00
|
|
|
this._context = null;
|
|
|
|
this._changed(/*#=*/ Change.GEOMETRY | /*#=*/ Change.PIXELS);
|
2011-03-04 21:40:38 -05:00
|
|
|
},
|
|
|
|
|
2013-08-14 15:29:56 -04:00
|
|
|
/**
|
|
|
|
* The Canvas object of the raster. If the raster was created from an image,
|
|
|
|
* accessing its canvas causes the raster to try and create one and draw the
|
|
|
|
* image into it. Depending on security policies, this might fail, in which
|
|
|
|
* case {@code null} is returned instead.
|
|
|
|
*
|
|
|
|
* @type Canvas
|
|
|
|
* @bean
|
|
|
|
*/
|
2011-03-04 20:26:12 -05:00
|
|
|
getCanvas: function() {
|
|
|
|
if (!this._canvas) {
|
2013-02-12 19:06:24 -05:00
|
|
|
var ctx = CanvasProvider.getContext(this._size);
|
2013-08-14 15:29:56 -04:00
|
|
|
// Since drawImage into canvas might fail based on security policies
|
|
|
|
// wrap the call in try-catch and only set _canvas if we succeeded.
|
2013-02-11 19:34:31 -05:00
|
|
|
try {
|
2013-02-12 18:54:56 -05:00
|
|
|
if (this._image)
|
2013-02-12 19:06:24 -05:00
|
|
|
ctx.drawImage(this._image, 0, 0);
|
|
|
|
this._canvas = ctx.canvas;
|
2013-02-11 19:34:31 -05:00
|
|
|
} catch (e) {
|
2013-02-12 19:23:30 -05:00
|
|
|
CanvasProvider.release(ctx);
|
2013-02-11 19:34:31 -05:00
|
|
|
}
|
2011-03-04 20:26:12 -05:00
|
|
|
}
|
|
|
|
return this._canvas;
|
|
|
|
},
|
|
|
|
|
2013-08-14 15:29:56 -04:00
|
|
|
// #setCanvas() is a simple alias to #setImage()
|
|
|
|
setCanvas: '#setImage',
|
2011-03-04 20:26:12 -05:00
|
|
|
|
2011-05-23 10:09:04 -04:00
|
|
|
/**
|
2013-08-14 15:29:56 -04:00
|
|
|
* The Canvas 2D drawing context of the raster.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2013-08-14 15:29:56 -04:00
|
|
|
* @type Context
|
2011-05-23 10:09:04 -04:00
|
|
|
* @bean
|
|
|
|
*/
|
2013-08-14 15:29:56 -04:00
|
|
|
getContext: function(/* modify */) {
|
|
|
|
if (!this._context)
|
|
|
|
this._context = this.getCanvas().getContext('2d');
|
|
|
|
// Support a hidden parameter that indicates if the context will be used
|
|
|
|
// to modify the Raster object. We can notify such changes ahead since
|
|
|
|
// they are only used afterwards for redrawing.
|
|
|
|
if (arguments[0]) {
|
|
|
|
// Also set _image to null since the Raster stops representing it.
|
|
|
|
// NOTE: This should theoretically be in our own _changed() handler
|
|
|
|
// for ChangeFlag.PIXELS, but since it's only happening in one place
|
|
|
|
// this is fine:
|
|
|
|
this._image = null;
|
|
|
|
this._changed(/*#=*/ Change.PIXELS);
|
|
|
|
}
|
|
|
|
return this._context;
|
2011-03-04 20:26:12 -05:00
|
|
|
},
|
|
|
|
|
2013-08-14 15:29:56 -04:00
|
|
|
setContext: function(context) {
|
|
|
|
this._context = context;
|
2011-03-04 20:26:12 -05:00
|
|
|
},
|
|
|
|
|
2013-03-10 18:19:59 -04:00
|
|
|
/**
|
|
|
|
* The source of the raster, which can be set using a DOM Image, a Canvas,
|
|
|
|
* a data url, a string describing the URL to load the image from, or the
|
2013-08-14 15:14:28 -04:00
|
|
|
* ID of a DOM element to get the image from (either a DOM Image or a
|
|
|
|
* Canvas). Reading this property will return the url of the source image or
|
|
|
|
* a data-url.
|
2013-03-10 18:19:59 -04:00
|
|
|
*
|
|
|
|
* @bean
|
|
|
|
* @type HTMLImageElement|Canvas|String
|
|
|
|
*
|
|
|
|
* @example {@paperscript}
|
|
|
|
* var raster = new Raster();
|
|
|
|
* raster.source = 'http://paperjs.org/about/resources/paper-js.gif';
|
|
|
|
* raster.position = view.center;
|
|
|
|
*
|
|
|
|
* @example {@paperscript}
|
|
|
|
* var raster = new Raster({
|
|
|
|
* source: 'http://paperjs.org/about/resources/paper-js.gif',
|
|
|
|
* position: view.center
|
|
|
|
* });
|
|
|
|
*/
|
2012-12-23 19:12:41 -05:00
|
|
|
getSource: function() {
|
2013-02-11 19:43:10 -05:00
|
|
|
return this._image && this._image.src || this.toDataURL();
|
2012-12-23 19:12:41 -05:00
|
|
|
},
|
|
|
|
|
|
|
|
setSource: function(src) {
|
2013-10-10 17:09:00 -04:00
|
|
|
/*#*/ if (options.environment == 'browser') {
|
2012-12-23 19:12:41 -05:00
|
|
|
var that = this,
|
|
|
|
// src can be an URL or a DOM ID to load the image from
|
|
|
|
image = document.getElementById(src) || new Image();
|
2013-07-03 22:02:29 -04:00
|
|
|
|
2013-02-11 19:35:46 -05:00
|
|
|
function loaded() {
|
2013-10-20 11:45:01 -04:00
|
|
|
var view = that._project.view;
|
|
|
|
if (view)
|
|
|
|
paper = view._scope;
|
2013-02-11 19:35:46 -05:00
|
|
|
that.fire('load');
|
2013-10-20 11:45:01 -04:00
|
|
|
if (view)
|
|
|
|
view.draw(true);
|
2013-02-11 19:35:46 -05:00
|
|
|
}
|
2013-07-03 22:02:29 -04:00
|
|
|
|
2013-08-15 14:32:47 -04:00
|
|
|
// IE has naturalWidth / Height defined, but width / height set to 0
|
|
|
|
// when the image is invisible in the document.
|
|
|
|
if (image.naturalWidth && image.naturalHeight) {
|
2013-02-11 19:35:46 -05:00
|
|
|
// Fire load event delayed, so behavior is the same as when it's
|
|
|
|
// actually loaded and we give the code time to install event
|
|
|
|
setTimeout(loaded, 0);
|
2013-08-15 14:32:47 -04:00
|
|
|
} else {
|
2013-07-03 22:02:29 -04:00
|
|
|
// Trigger the onLoad event on the image once it's loaded
|
|
|
|
DomEvent.add(image, {
|
|
|
|
load: function() {
|
|
|
|
that.setImage(image);
|
|
|
|
loaded();
|
|
|
|
}
|
|
|
|
});
|
2013-08-15 14:32:47 -04:00
|
|
|
// A new image created above? Set the source now.
|
|
|
|
if (!image.src)
|
|
|
|
image.src = src;
|
2013-02-11 19:35:46 -05:00
|
|
|
}
|
2013-05-28 11:05:40 -04:00
|
|
|
this.setImage(image);
|
2013-10-10 17:09:00 -04:00
|
|
|
/*#*/ } else if (options.environment == 'node') {
|
2013-05-28 11:05:40 -04:00
|
|
|
var image = new Image();
|
2012-12-23 19:12:41 -05:00
|
|
|
// If we're running on the server and it's a string,
|
2013-05-24 16:38:43 -04:00
|
|
|
// check if it is a data URL
|
2013-05-28 11:05:40 -04:00
|
|
|
if (/^data:/.test(src)) {
|
2013-05-28 11:10:51 -04:00
|
|
|
// Preserve the data in this._data since canvas-node eats it.
|
|
|
|
// TODO: Fix canvas-node instead
|
|
|
|
image.src = this._data = src;
|
2013-05-24 16:38:43 -04:00
|
|
|
} else {
|
2013-05-28 11:05:40 -04:00
|
|
|
// Load it from disk:
|
|
|
|
// TODO: load images async, calling setImage once loaded as above.
|
2013-05-24 16:38:43 -04:00
|
|
|
image.src = fs.readFileSync(src);
|
|
|
|
}
|
2012-12-23 19:12:41 -05:00
|
|
|
this.setImage(image);
|
2013-10-10 17:09:00 -04:00
|
|
|
/*#*/ } // options.environment == 'node'
|
2012-12-23 19:12:41 -05:00
|
|
|
},
|
|
|
|
|
2013-02-11 19:42:36 -05:00
|
|
|
// DOCS: document Raster#getElement
|
|
|
|
getElement: function() {
|
|
|
|
return this._canvas || this._image;
|
|
|
|
},
|
|
|
|
|
2011-05-23 10:09:04 -04:00
|
|
|
/**
|
2013-08-14 15:14:28 -04:00
|
|
|
* Extracts a part of the Raster's content as a sub image, and returns it as
|
|
|
|
* a Canvas object.
|
|
|
|
*
|
2011-05-23 10:19:37 -04:00
|
|
|
* @param {Rectangle} rect the boundaries of the sub image in pixel
|
|
|
|
* coordinates
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2013-08-14 15:14:28 -04:00
|
|
|
* @return {Canvas} the sub image as a Canvas object
|
2011-05-23 10:09:04 -04:00
|
|
|
*/
|
2013-08-14 15:21:47 -04:00
|
|
|
getSubCanvas: function(rect) {
|
2011-03-13 13:31:00 -04:00
|
|
|
rect = Rectangle.read(arguments);
|
2013-02-12 19:06:24 -05:00
|
|
|
var ctx = CanvasProvider.getContext(rect.getSize());
|
|
|
|
ctx.drawImage(this.getCanvas(), rect.x, rect.y,
|
2013-03-17 13:57:16 -04:00
|
|
|
rect.width, rect.height, 0, 0, rect.width, rect.height);
|
2013-02-12 19:06:24 -05:00
|
|
|
return ctx.canvas;
|
2011-02-24 07:52:27 -05:00
|
|
|
},
|
2011-03-03 17:45:17 -05:00
|
|
|
|
2013-08-14 15:14:28 -04:00
|
|
|
/**
|
|
|
|
* Extracts a part of the raster item's content as a new raster item, placed
|
|
|
|
* in exactly the same place as the original content.
|
|
|
|
*
|
|
|
|
* @param {Rectangle} rect the boundaries of the sub raster in pixel
|
|
|
|
* coordinates
|
|
|
|
*
|
|
|
|
* @return {Raster} the sub raster as a newly created raster item
|
|
|
|
*/
|
|
|
|
getSubRaster: function(rect) {
|
|
|
|
rect = Rectangle.read(arguments);
|
2013-08-14 15:21:47 -04:00
|
|
|
var raster = new Raster({
|
|
|
|
canvas: this.getSubCanvas(rect),
|
|
|
|
insert: false
|
|
|
|
});
|
2013-08-14 15:14:28 -04:00
|
|
|
raster.translate(rect.getCenter().subtract(this.getSize().divide(2)));
|
|
|
|
raster._matrix.preConcatenate(this._matrix);
|
2013-08-14 15:21:47 -04:00
|
|
|
raster.insertAbove(this);
|
2013-08-14 15:14:28 -04:00
|
|
|
return raster;
|
|
|
|
},
|
|
|
|
|
2013-03-10 18:19:59 -04:00
|
|
|
/**
|
|
|
|
* Returns a Base 64 encoded {@code data:} URL representation of the raster.
|
|
|
|
*
|
|
|
|
* @return {String}
|
|
|
|
*/
|
2013-02-09 12:44:25 -05:00
|
|
|
toDataURL: function() {
|
2013-02-11 19:34:31 -05:00
|
|
|
// See if the linked image is base64 encoded already, if so reuse it,
|
2013-04-16 22:41:45 -04:00
|
|
|
// otherwise try using canvas.toDataURL()
|
2013-10-10 17:09:00 -04:00
|
|
|
/*#*/ if (options.environment == 'node') {
|
2013-05-28 11:10:51 -04:00
|
|
|
if (this._data)
|
|
|
|
return this._data;
|
2013-05-28 11:05:40 -04:00
|
|
|
/*#*/ } else {
|
2013-02-09 12:44:25 -05:00
|
|
|
var src = this._image && this._image.src;
|
2013-03-01 13:08:17 -05:00
|
|
|
if (/^data:/.test(src))
|
2013-02-11 19:34:31 -05:00
|
|
|
return src;
|
2013-05-28 11:10:51 -04:00
|
|
|
/*#*/ }
|
2013-02-11 19:34:31 -05:00
|
|
|
var canvas = this.getCanvas();
|
|
|
|
return canvas ? canvas.toDataURL() : null;
|
2013-02-09 12:44:25 -05:00
|
|
|
},
|
|
|
|
|
2011-05-23 10:09:04 -04:00
|
|
|
/**
|
2011-05-23 10:19:37 -04:00
|
|
|
* Draws an image on the raster.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-23 10:09:04 -04:00
|
|
|
* @param {HTMLImageELement|Canvas} image
|
2011-05-23 10:19:37 -04:00
|
|
|
* @param {Point} point the offset of the image as a point in pixel
|
|
|
|
* coordinates
|
2011-05-23 10:09:04 -04:00
|
|
|
*/
|
2011-03-04 20:26:12 -05:00
|
|
|
drawImage: function(image, point) {
|
2011-03-13 13:31:00 -04:00
|
|
|
point = Point.read(arguments, 1);
|
2011-06-20 15:13:24 -04:00
|
|
|
this.getContext(true).drawImage(image, point.x, point.y);
|
2011-02-24 07:52:27 -05:00
|
|
|
},
|
2011-03-03 17:45:17 -05:00
|
|
|
|
2011-05-19 09:43:23 -04:00
|
|
|
/**
|
|
|
|
* Calculates the average color of the image within the given path,
|
|
|
|
* rectangle or point. This can be used for creating raster image
|
|
|
|
* effects.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-23 10:09:04 -04:00
|
|
|
* @param {Path|Rectangle|Point} object
|
2013-04-08 03:11:43 -04:00
|
|
|
* @return {Color} the average color contained in the area covered by the
|
2011-05-19 09:43:23 -04:00
|
|
|
* specified path, rectangle or point.
|
|
|
|
*/
|
|
|
|
getAverageColor: function(object) {
|
|
|
|
var bounds, path;
|
2011-12-27 14:39:46 -05:00
|
|
|
if (!object) {
|
|
|
|
bounds = this.getBounds();
|
|
|
|
} else if (object instanceof PathItem) {
|
2011-06-01 05:49:43 -04:00
|
|
|
// TODO: What if the path is smaller than 1 px?
|
|
|
|
// TODO: How about rounding of bounds.size?
|
2011-05-19 09:43:23 -04:00
|
|
|
path = object;
|
|
|
|
bounds = object.getBounds();
|
|
|
|
} else if (object.width) {
|
|
|
|
bounds = new Rectangle(object);
|
|
|
|
} else if (object.x) {
|
2011-11-29 11:19:15 -05:00
|
|
|
// Create a rectangle of 1px size around the specified coordinates
|
2013-05-28 16:54:47 -04:00
|
|
|
bounds = new Rectangle(object.x - 0.5, object.y - 0.5, 1, 1);
|
2011-05-19 09:43:23 -04:00
|
|
|
}
|
2011-05-19 13:51:13 -04:00
|
|
|
// Use a sample size of max 32 x 32 pixels, into which the path is
|
|
|
|
// scaled as a clipping path, and then the actual image is drawn in and
|
|
|
|
// sampled.
|
2011-05-19 13:47:49 -04:00
|
|
|
var sampleSize = 32,
|
|
|
|
width = Math.min(bounds.width, sampleSize),
|
|
|
|
height = Math.min(bounds.height, sampleSize);
|
2011-05-19 13:51:13 -04:00
|
|
|
// Reuse the same sample context for speed. Memory consumption is low
|
|
|
|
// since it's only 32 x 32 pixels.
|
2011-05-19 13:47:49 -04:00
|
|
|
var ctx = Raster._sampleContext;
|
|
|
|
if (!ctx) {
|
2013-02-12 19:06:24 -05:00
|
|
|
ctx = Raster._sampleContext = CanvasProvider.getContext(
|
|
|
|
new Size(sampleSize));
|
2011-05-19 09:43:23 -04:00
|
|
|
} else {
|
|
|
|
// Clear the sample canvas:
|
2013-02-12 19:07:24 -05:00
|
|
|
ctx.clearRect(0, 0, sampleSize + 1, sampleSize + 1);
|
2011-05-19 09:43:23 -04:00
|
|
|
}
|
|
|
|
ctx.save();
|
2011-05-19 13:51:13 -04:00
|
|
|
// Scale the context so that the bounds ends up at the given sample size
|
2013-04-18 19:50:18 -04:00
|
|
|
var matrix = new Matrix()
|
|
|
|
.scale(width / bounds.width, height / bounds.height)
|
|
|
|
.translate(-bounds.x, -bounds.y);
|
|
|
|
matrix.applyToContext(ctx);
|
2011-05-19 09:43:23 -04:00
|
|
|
// If a path was passed, draw it as a clipping mask:
|
2013-06-11 23:40:44 -04:00
|
|
|
// See Project#draw() for an explanation of Base.merge()
|
2011-06-04 10:28:06 -04:00
|
|
|
if (path)
|
2013-06-11 23:40:44 -04:00
|
|
|
path.draw(ctx, Base.merge({ clip: true, transforms: [matrix] }));
|
2011-05-19 13:51:13 -04:00
|
|
|
// Now draw the image clipped into it.
|
2011-07-01 05:32:09 -04:00
|
|
|
this._matrix.applyToContext(ctx);
|
2013-02-11 19:42:36 -05:00
|
|
|
ctx.drawImage(this.getElement(),
|
2011-05-19 09:43:23 -04:00
|
|
|
-this._size.width / 2, -this._size.height / 2);
|
|
|
|
ctx.restore();
|
2011-05-19 13:51:13 -04:00
|
|
|
// Get pixel data from the context and calculate the average color value
|
|
|
|
// from it, taking alpha into account.
|
2011-05-19 09:43:23 -04:00
|
|
|
var pixels = ctx.getImageData(0.5, 0.5, Math.ceil(width),
|
|
|
|
Math.ceil(height)).data,
|
|
|
|
channels = [0, 0, 0],
|
|
|
|
total = 0;
|
|
|
|
for (var i = 0, l = pixels.length; i < l; i += 4) {
|
|
|
|
var alpha = pixels[i + 3];
|
|
|
|
total += alpha;
|
|
|
|
alpha /= 255;
|
|
|
|
channels[0] += pixels[i] * alpha;
|
|
|
|
channels[1] += pixels[i + 1] * alpha;
|
|
|
|
channels[2] += pixels[i + 2] * alpha;
|
|
|
|
}
|
|
|
|
for (var i = 0; i < 3; i++)
|
|
|
|
channels[i] /= total;
|
|
|
|
return total ? Color.read(channels) : null;
|
|
|
|
},
|
|
|
|
|
2011-05-27 07:28:13 -04:00
|
|
|
/**
|
|
|
|
* {@grouptitle Pixels}
|
|
|
|
* Gets the color of a pixel in the raster.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-27 20:17:35 -04:00
|
|
|
* @name Raster#getPixel
|
2011-05-27 07:28:13 -04:00
|
|
|
* @function
|
|
|
|
* @param x the x offset of the pixel in pixel coordinates
|
|
|
|
* @param y the y offset of the pixel in pixel coordinates
|
2013-04-08 03:11:43 -04:00
|
|
|
* @return {Color} the color of the pixel
|
2011-05-27 07:28:13 -04:00
|
|
|
*/
|
|
|
|
/**
|
|
|
|
* Gets the color of a pixel in the raster.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-06-16 14:26:50 -04:00
|
|
|
* @name Raster#getPixel
|
|
|
|
* @function
|
2011-05-27 07:28:13 -04:00
|
|
|
* @param point the offset of the pixel as a point in pixel coordinates
|
2013-04-08 03:11:43 -04:00
|
|
|
* @return {Color} the color of the pixel
|
2011-05-27 07:28:13 -04:00
|
|
|
*/
|
|
|
|
getPixel: function(point) {
|
|
|
|
point = Point.read(arguments);
|
2013-04-24 21:09:58 -04:00
|
|
|
var data = this.getContext().getImageData(point.x, point.y, 1, 1).data;
|
2013-04-24 19:29:28 -04:00
|
|
|
// Alpha is separate now:
|
2013-04-24 21:09:58 -04:00
|
|
|
return new Color('rgb', [data[0] / 255, data[1] / 255, data[2] / 255],
|
|
|
|
data[3] / 255);
|
2011-05-27 07:28:13 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Sets the color of the specified pixel to the specified color.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-05-27 20:17:35 -04:00
|
|
|
* @name Raster#setPixel
|
2011-05-27 07:28:13 -04:00
|
|
|
* @function
|
|
|
|
* @param x the x offset of the pixel in pixel coordinates
|
|
|
|
* @param y the y offset of the pixel in pixel coordinates
|
|
|
|
* @param color the color that the pixel will be set to
|
|
|
|
*/
|
|
|
|
/**
|
|
|
|
* Sets the color of the specified pixel to the specified color.
|
2011-06-30 06:01:51 -04:00
|
|
|
*
|
2011-06-16 14:26:50 -04:00
|
|
|
* @name Raster#setPixel
|
|
|
|
* @function
|
2011-05-27 07:28:13 -04:00
|
|
|
* @param point the offset of the pixel as a point in pixel coordinates
|
|
|
|
* @param color the color that the pixel will be set to
|
|
|
|
*/
|
2013-06-24 13:15:54 -04:00
|
|
|
setPixel: function(/* point, color */) {
|
|
|
|
var point = Point.read(arguments),
|
|
|
|
color = Color.read(arguments),
|
|
|
|
components = color._convert('rgb'),
|
|
|
|
alpha = color._alpha,
|
2013-04-24 21:09:58 -04:00
|
|
|
ctx = this.getContext(true),
|
|
|
|
imageData = ctx.createImageData(1, 1),
|
|
|
|
data = imageData.data;
|
|
|
|
data[0] = components[0] * 255;
|
|
|
|
data[1] = components[1] * 255;
|
|
|
|
data[2] = components[2] * 255;
|
|
|
|
data[3] = alpha != null ? alpha * 255 : 255;
|
2013-06-24 13:15:54 -04:00
|
|
|
ctx.putImageData(imageData, point.x, point.y);
|
2011-05-27 07:28:13 -04:00
|
|
|
},
|
|
|
|
|
2013-02-12 17:40:55 -05:00
|
|
|
// DOCS: document Raster#createImageData
|
2011-05-23 10:19:37 -04:00
|
|
|
/**
|
2011-05-27 07:28:13 -04:00
|
|
|
* {@grouptitle Image Data}
|
2011-05-23 10:19:37 -04:00
|
|
|
* @param {Size} size
|
|
|
|
* @return {ImageData}
|
|
|
|
*/
|
2013-02-12 17:40:55 -05:00
|
|
|
createImageData: function(size) {
|
2011-03-09 13:17:12 -05:00
|
|
|
size = Size.read(arguments);
|
|
|
|
return this.getContext().createImageData(size.width, size.height);
|
|
|
|
},
|
|
|
|
|
2013-06-18 21:18:39 -04:00
|
|
|
// DOCS: document Raster#getImageData
|
2011-05-23 10:19:37 -04:00
|
|
|
/**
|
|
|
|
* @param {Rectangle} rect
|
|
|
|
* @return {ImageData}
|
|
|
|
*/
|
2013-02-12 17:40:55 -05:00
|
|
|
getImageData: function(rect) {
|
2011-03-13 13:31:00 -04:00
|
|
|
rect = Rectangle.read(arguments);
|
2011-04-26 10:39:16 -04:00
|
|
|
if (rect.isEmpty())
|
2013-06-27 19:06:11 -04:00
|
|
|
rect = new Rectangle(this._size);
|
2011-04-26 10:39:16 -04:00
|
|
|
return this.getContext().getImageData(rect.x, rect.y,
|
|
|
|
rect.width, rect.height);
|
2011-03-09 13:17:12 -05:00
|
|
|
},
|
|
|
|
|
2013-02-12 17:40:55 -05:00
|
|
|
// DOCS: document Raster#setImageData
|
2011-05-23 10:19:37 -04:00
|
|
|
/**
|
|
|
|
* @param {ImageData} data
|
|
|
|
* @param {Point} point
|
|
|
|
* @return {ImageData}
|
|
|
|
*/
|
2013-02-12 17:40:55 -05:00
|
|
|
setImageData: function(data, point) {
|
2011-03-13 13:31:00 -04:00
|
|
|
point = Point.read(arguments, 1);
|
2011-06-20 15:13:24 -04:00
|
|
|
this.getContext(true).putImageData(data, point.x, point.y);
|
2011-03-09 13:17:12 -05:00
|
|
|
},
|
|
|
|
|
2012-12-15 11:19:10 -05:00
|
|
|
_getBounds: function(getter, matrix) {
|
2011-11-26 04:39:51 -05:00
|
|
|
var rect = new Rectangle(this._size).setCenter(0, 0);
|
|
|
|
return matrix ? matrix._transformBounds(rect) : rect;
|
2011-07-04 13:45:53 -04:00
|
|
|
},
|
|
|
|
|
2013-06-24 13:15:54 -04:00
|
|
|
_hitTest: function(point) {
|
2013-04-21 11:43:05 -04:00
|
|
|
if (this._contains(point)) {
|
2011-11-11 09:00:53 -05:00
|
|
|
var that = this;
|
|
|
|
return new HitResult('pixel', that, {
|
|
|
|
offset: point.add(that._size.divide(2)).round(),
|
2012-09-30 17:07:27 -04:00
|
|
|
// Inject as Bootstrap accessor, so #toString renders well too
|
|
|
|
color: {
|
|
|
|
get: function() {
|
|
|
|
return that.getPixel(this.offset);
|
|
|
|
}
|
2011-11-11 09:00:53 -05:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2013-04-18 19:58:35 -04:00
|
|
|
_draw: function(ctx) {
|
2013-02-11 19:42:36 -05:00
|
|
|
var element = this.getElement();
|
2013-02-14 15:28:11 -05:00
|
|
|
if (element) {
|
|
|
|
// Handle opacity for Rasters separately from the rest, since
|
2013-04-18 20:04:06 -04:00
|
|
|
// Rasters never draw a stroke. See Item#draw().
|
2013-02-14 15:28:11 -05:00
|
|
|
ctx.globalAlpha = this._opacity;
|
2013-02-11 19:42:36 -05:00
|
|
|
ctx.drawImage(element,
|
|
|
|
-this._size.width / 2, -this._size.height / 2);
|
2013-02-14 15:28:11 -05:00
|
|
|
}
|
2013-06-19 11:22:08 -04:00
|
|
|
},
|
|
|
|
|
|
|
|
_canComposite: function() {
|
|
|
|
return true;
|
2011-02-21 12:43:56 -05:00
|
|
|
}
|
2011-03-03 11:32:55 -05:00
|
|
|
});
|