(function() { 'use strict'; // CONSTANTS var IMAGE = 'Image'; /** * Image constructor * @constructor * @memberof Konva * @augments Konva.Shape * @param {Object} config * @param {Image} config.image * @param {Object} [config.crop] * @@shapeParams * @@nodeParams * @example * var imageObj = new Image(); * imageObj.onload = function() { * var image = new Konva.Image({ * x: 200, * y: 50, * image: imageObj, * width: 100, * height: 100 * }); * }; * imageObj.src = '/path/to/image.jpg' */ Konva.Image = function(config) { this.___init(config); }; Konva.Image.prototype = { ___init: function(config) { // call super constructor Konva.Shape.call(this, config); this.className = IMAGE; this.sceneFunc(this._sceneFunc); this.hitFunc(this._hitFunc); }, _useBufferCanvas: function() { return (this.hasShadow() || this.getAbsoluteOpacity() !== 1) && this.hasStroke() && this.getStage(); }, _sceneFunc: function(context) { var width = this.getWidth(), height = this.getHeight(), image = this.getImage(), cropWidth, cropHeight, params; if (image) { cropWidth = this.getCropWidth(); cropHeight = this.getCropHeight(); if (cropWidth && cropHeight) { params = [image, this.getCropX(), this.getCropY(), cropWidth, cropHeight, 0, 0, width, height]; } else { params = [image, 0, 0, width, height]; } } if (this.hasFill() || this.hasStroke()) { context.beginPath(); context.rect(0, 0, width, height); context.closePath(); context.fillStrokeShape(this); } if (image) { context.drawImage.apply(context, params); } }, _hitFunc: function(context) { var width = this.getWidth(), height = this.getHeight(); context.beginPath(); context.rect(0, 0, width, height); context.closePath(); context.fillStrokeShape(this); }, getWidth: function() { var image = this.getImage(); return this.attrs.width || (image ? image.width : 0); }, getHeight: function() { var image = this.getImage(); return this.attrs.height || (image ? image.height : 0); } }; Konva.Util.extend(Konva.Image, Konva.Shape); // add getters setters Konva.Factory.addGetterSetter(Konva.Image, 'image'); /** * set image * @name setImage * @method * @memberof Konva.Image.prototype * @param {Image} image */ /** * get image * @name getImage * @method * @memberof Konva.Image.prototype * @returns {Image} */ Konva.Factory.addComponentsGetterSetter(Konva.Image, 'crop', ['x', 'y', 'width', 'height']); /** * get/set crop * @method * @name crop * @memberof Konva.Image.prototype * @param {Object} crop * @param {Number} crop.x * @param {Number} crop.y * @param {Number} crop.width * @param {Number} crop.height * @returns {Object} * @example * // get crop * var crop = image.crop(); * * // set crop * image.crop({ * x: 20, * y: 20, * width: 20, * height: 20 * }); */ Konva.Factory.addGetterSetter(Konva.Image, 'cropX', 0); /** * get/set crop x * @method * @name cropX * @memberof Konva.Image.prototype * @param {Number} x * @returns {Number} * @example * // get crop x * var cropX = image.cropX(); * * // set crop x * image.cropX(20); */ Konva.Factory.addGetterSetter(Konva.Image, 'cropY', 0); /** * get/set crop y * @name cropY * @method * @memberof Konva.Image.prototype * @param {Number} y * @returns {Number} * @example * // get crop y * var cropY = image.cropY(); * * // set crop y * image.cropY(20); */ Konva.Factory.addGetterSetter(Konva.Image, 'cropWidth', 0); /** * get/set crop width * @name cropWidth * @method * @memberof Konva.Image.prototype * @param {Number} width * @returns {Number} * @example * // get crop width * var cropWidth = image.cropWidth(); * * // set crop width * image.cropWidth(20); */ Konva.Factory.addGetterSetter(Konva.Image, 'cropHeight', 0); /** * get/set crop height * @name cropHeight * @method * @memberof Konva.Image.prototype * @param {Number} height * @returns {Number} * @example * // get crop height * var cropHeight = image.cropHeight(); * * // set crop height * image.cropHeight(20); */ Konva.Collection.mapMethods(Konva.Image); /** * load image from given url and create `Konva.Image` instance * @method * @memberof Konva.Image * @param {String} url image source * @param {Function} callback with Konva.Image instance as first argument * @example * Konva.Image.fromURL(imageURL, function(image){ * // image is Konva.Image instance * layer.add(image); * layer.draw(); * }); */ Konva.Image.fromURL = function(url, callback) { var img = new Image(); img.onload = function() { var image = new Konva.Image({ image: img }); callback(image); }; img.src = url; }; })();