104 lines
3.2 KiB
JavaScript
104 lines
3.2 KiB
JavaScript
'use strict';
|
|
|
|
module.exports = function() {
|
|
var _this = this;
|
|
|
|
if (!this.imagePosition) {
|
|
this.imagePosition = { x: 0, y: 0, width: 0, height: 0 };
|
|
}
|
|
|
|
if (this.image.blendingMode) {
|
|
this.context.globalCompositeOperation = this.image.blendingMode;
|
|
}
|
|
|
|
if (this.imageNode) {
|
|
setImagePosition();
|
|
return;
|
|
}
|
|
|
|
this.imageNode = new Image();
|
|
this.imageNode.onerror = function() {
|
|
throw new Error('Granim: The image source is invalid.');
|
|
};
|
|
this.imageNode.onload = function() {
|
|
_this.imgOriginalWidth = _this.imageNode.width;
|
|
_this.imgOriginalHeight = _this.imageNode.height;
|
|
setImagePosition();
|
|
_this.refreshColorsAndPos();
|
|
if (!_this.isPausedWhenNotInView || _this.isCanvasInWindowView) {
|
|
_this.animation = requestAnimationFrame(_this.animateColors.bind(_this));
|
|
}
|
|
_this.isImgLoaded = true;
|
|
};
|
|
this.imageNode.src = this.image.source;
|
|
|
|
function setImagePosition() {
|
|
var i, currentAxis;
|
|
|
|
for (i = 0; i < 2; i++) {
|
|
currentAxis = !i ? 'x' : 'y';
|
|
setImageAxisPosition(currentAxis);
|
|
}
|
|
|
|
function setImageAxisPosition(axis) {
|
|
var canvasWidthOrHeight = _this[axis + '1'];
|
|
var imgOriginalWidthOrHeight = _this[axis === 'x' ? 'imgOriginalWidth' : 'imgOriginalHeight'];
|
|
var imageAlignIndex = axis === 'x' ? _this.image.position[0] : _this.image.position[1];
|
|
var imageAxisPosition;
|
|
switch(imageAlignIndex) {
|
|
case 'center':
|
|
imageAxisPosition = imgOriginalWidthOrHeight > canvasWidthOrHeight
|
|
? -(imgOriginalWidthOrHeight - canvasWidthOrHeight) / 2
|
|
: (canvasWidthOrHeight - imgOriginalWidthOrHeight) / 2;
|
|
_this.imagePosition[axis] = imageAxisPosition;
|
|
_this.imagePosition[axis === 'x' ? 'width' : 'height'] = imgOriginalWidthOrHeight;
|
|
break;
|
|
|
|
case 'top':
|
|
_this.imagePosition['y'] = 0;
|
|
_this.imagePosition['height'] = imgOriginalWidthOrHeight;
|
|
break;
|
|
|
|
case 'bottom':
|
|
_this.imagePosition['y'] = canvasWidthOrHeight - imgOriginalWidthOrHeight;
|
|
_this.imagePosition['height'] = imgOriginalWidthOrHeight;
|
|
break;
|
|
|
|
case 'right':
|
|
_this.imagePosition['x'] = canvasWidthOrHeight - imgOriginalWidthOrHeight;
|
|
_this.imagePosition['width'] = imgOriginalWidthOrHeight;
|
|
break;
|
|
|
|
case 'left':
|
|
_this.imagePosition['x'] = 0;
|
|
_this.imagePosition['width'] = imgOriginalWidthOrHeight;
|
|
break;
|
|
}
|
|
|
|
if (_this.image.stretchMode) {
|
|
imageAlignIndex = axis === 'x' ? _this.image.stretchMode[0] : _this.image.stretchMode[1];
|
|
switch(imageAlignIndex) {
|
|
case 'none':
|
|
break;
|
|
case 'stretch':
|
|
_this.imagePosition[axis] = 0;
|
|
_this.imagePosition[axis === 'x' ? 'width' : 'height'] = canvasWidthOrHeight;
|
|
break;
|
|
|
|
case 'stretch-if-bigger':
|
|
if (imgOriginalWidthOrHeight < canvasWidthOrHeight) break;
|
|
_this.imagePosition[axis] = 0;
|
|
_this.imagePosition[axis === 'x' ? 'width' : 'height'] = canvasWidthOrHeight;
|
|
break;
|
|
|
|
case 'stretch-if-smaller':
|
|
if (imgOriginalWidthOrHeight > canvasWidthOrHeight) break;
|
|
_this.imagePosition[axis] = 0;
|
|
_this.imagePosition[axis === 'x' ? 'width' : 'height'] = canvasWidthOrHeight;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|