321 lines
8.7 KiB
JavaScript
321 lines
8.7 KiB
JavaScript
import { Factory } from "../Factory.js";
|
|
import { Shape } from "../Shape.js";
|
|
import { Animation } from "../Animation.js";
|
|
import { getNumberValidator } from "../Validators.js";
|
|
import { _registerNode } from "../Global.js";
|
|
/**
|
|
* Sprite constructor
|
|
* @constructor
|
|
* @memberof Konva
|
|
* @augments Konva.Shape
|
|
* @param {Object} config
|
|
* @param {String} config.animation animation key
|
|
* @param {Object} config.animations animation map
|
|
* @param {Integer} [config.frameIndex] animation frame index
|
|
* @param {Image} config.image image object
|
|
* @param {Integer} [config.frameRate] animation frame rate
|
|
* @@shapeParams
|
|
* @@nodeParams
|
|
* @example
|
|
* var imageObj = new Image();
|
|
* imageObj.onload = function() {
|
|
* var sprite = new Konva.Sprite({
|
|
* x: 200,
|
|
* y: 100,
|
|
* image: imageObj,
|
|
* animation: 'standing',
|
|
* animations: {
|
|
* standing: [
|
|
* // x, y, width, height (6 frames)
|
|
* 0, 0, 49, 109,
|
|
* 52, 0, 49, 109,
|
|
* 105, 0, 49, 109,
|
|
* 158, 0, 49, 109,
|
|
* 210, 0, 49, 109,
|
|
* 262, 0, 49, 109
|
|
* ],
|
|
* kicking: [
|
|
* // x, y, width, height (6 frames)
|
|
* 0, 109, 45, 98,
|
|
* 45, 109, 45, 98,
|
|
* 95, 109, 63, 98,
|
|
* 156, 109, 70, 98,
|
|
* 229, 109, 60, 98,
|
|
* 287, 109, 41, 98
|
|
* ]
|
|
* },
|
|
* frameRate: 7,
|
|
* frameIndex: 0
|
|
* });
|
|
* };
|
|
* imageObj.src = '/path/to/image.jpg'
|
|
*/
|
|
export class Sprite extends Shape {
|
|
constructor(config) {
|
|
super(config);
|
|
this._updated = true;
|
|
this.anim = new Animation(() => {
|
|
// if we don't need to redraw layer we should return false
|
|
const updated = this._updated;
|
|
this._updated = false;
|
|
return updated;
|
|
});
|
|
this.on('animationChange.konva', function () {
|
|
// reset index when animation changes
|
|
this.frameIndex(0);
|
|
});
|
|
this.on('frameIndexChange.konva', function () {
|
|
this._updated = true;
|
|
});
|
|
// smooth change for frameRate
|
|
this.on('frameRateChange.konva', function () {
|
|
if (!this.anim.isRunning()) {
|
|
return;
|
|
}
|
|
clearInterval(this.interval);
|
|
this._setInterval();
|
|
});
|
|
}
|
|
// the current frame: its box in the sprite sheet and where it is drawn,
|
|
// or nothing when the animation key or the frame index does not exist
|
|
// (then nothing is drawn, like an image without an image)
|
|
_getFrame() {
|
|
var _a, _b;
|
|
const anim = this.animation(), set = (_a = this.animations()) === null || _a === void 0 ? void 0 : _a[anim], index = this.frameIndex(), ix4 = index * 4;
|
|
if (!set || !Number.isInteger(index) || ix4 < 0 || ix4 + 4 > set.length) {
|
|
return;
|
|
}
|
|
const offset = ((_b = this.frameOffsets()) === null || _b === void 0 ? void 0 : _b[anim]) || [];
|
|
return {
|
|
x: set[ix4],
|
|
y: set[ix4 + 1],
|
|
width: set[ix4 + 2],
|
|
height: set[ix4 + 3],
|
|
offsetX: offset[index * 2] || 0,
|
|
offsetY: offset[index * 2 + 1] || 0,
|
|
};
|
|
}
|
|
_getStrokePadding() {
|
|
return super._getStrokePadding(this.strokeScaleEnabled() ? 1 : undefined);
|
|
}
|
|
_sceneFunc(context) {
|
|
const frame = this._getFrame();
|
|
if (!frame) {
|
|
return;
|
|
}
|
|
const { x, y, width, height, offsetX, offsetY } = frame;
|
|
const image = this.image();
|
|
if (this.hasFill() || this.hasStroke()) {
|
|
context.beginPath();
|
|
context.rect(offsetX, offsetY, width, height);
|
|
context.closePath();
|
|
context.fillStrokeShape(this);
|
|
}
|
|
if (image) {
|
|
context.drawImage(image, x, y, width, height, offsetX, offsetY, width, height);
|
|
}
|
|
}
|
|
_hitFunc(context) {
|
|
const { x, y, width, height } = this.getSelfRect();
|
|
context.beginPath();
|
|
context.rect(x, y, width, height);
|
|
context.closePath();
|
|
context.fillShape(this);
|
|
}
|
|
getSelfRect() {
|
|
const frame = this._getFrame();
|
|
return frame
|
|
? {
|
|
x: frame.offsetX,
|
|
y: frame.offsetY,
|
|
width: frame.width,
|
|
height: frame.height,
|
|
}
|
|
: { x: 0, y: 0, width: 0, height: 0 };
|
|
}
|
|
_useBufferCanvas(forceFill, opacity = this.getAbsoluteOpacity()) {
|
|
return super._useBufferCanvas(true, opacity);
|
|
}
|
|
_setInterval() {
|
|
const that = this;
|
|
this.interval = setInterval(function () {
|
|
that._updateIndex();
|
|
}, 1000 / this.frameRate());
|
|
}
|
|
/**
|
|
* start sprite animation
|
|
* @method
|
|
* @name Konva.Sprite#start
|
|
*/
|
|
start() {
|
|
if (this.isRunning()) {
|
|
return;
|
|
}
|
|
const layer = this.getLayer();
|
|
// The interval advances frames; the animation callback requests a redraw
|
|
// only when a frame has changed.
|
|
this.anim.setLayers(layer);
|
|
this._setInterval();
|
|
this.anim.start();
|
|
}
|
|
/**
|
|
* stop sprite animation
|
|
* @method
|
|
* @name Konva.Sprite#stop
|
|
*/
|
|
stop() {
|
|
this.anim.stop();
|
|
clearInterval(this.interval);
|
|
}
|
|
destroy() {
|
|
this.stop();
|
|
return super.destroy();
|
|
}
|
|
/**
|
|
* determine if animation of sprite is running or not. returns true or false
|
|
* @method
|
|
* @name Konva.Sprite#isRunning
|
|
* @returns {Boolean}
|
|
*/
|
|
isRunning() {
|
|
return this.anim.isRunning();
|
|
}
|
|
_updateIndex() {
|
|
var _a;
|
|
const index = this.frameIndex(), set = (_a = this.animations()) === null || _a === void 0 ? void 0 : _a[this.animation()], len = set ? set.length / 4 : 0;
|
|
this.frameIndex(index < len - 1 ? index + 1 : 0);
|
|
}
|
|
}
|
|
Sprite.prototype.className = 'Sprite';
|
|
_registerNode(Sprite, true);
|
|
// add getters setters
|
|
Factory.addGetterSetter(Sprite, 'animation');
|
|
/**
|
|
* get/set animation key
|
|
* @name Konva.Sprite#animation
|
|
* @method
|
|
* @param {String} anim animation key
|
|
* @returns {String}
|
|
* @example
|
|
* // get animation key
|
|
* var animation = sprite.animation();
|
|
*
|
|
* // set animation key
|
|
* sprite.animation('kicking');
|
|
*/
|
|
Factory.addGetterSetter(Sprite, 'animations');
|
|
/**
|
|
* get/set animations map
|
|
* @name Konva.Sprite#animations
|
|
* @method
|
|
* @param {Object} animations
|
|
* @returns {Object}
|
|
* @example
|
|
* // get animations map
|
|
* var animations = sprite.animations();
|
|
*
|
|
* // set animations map
|
|
* sprite.animations({
|
|
* standing: [
|
|
* // x, y, width, height (6 frames)
|
|
* 0, 0, 49, 109,
|
|
* 52, 0, 49, 109,
|
|
* 105, 0, 49, 109,
|
|
* 158, 0, 49, 109,
|
|
* 210, 0, 49, 109,
|
|
* 262, 0, 49, 109
|
|
* ],
|
|
* kicking: [
|
|
* // x, y, width, height (6 frames)
|
|
* 0, 109, 45, 98,
|
|
* 45, 109, 45, 98,
|
|
* 95, 109, 63, 98,
|
|
* 156, 109, 70, 98,
|
|
* 229, 109, 60, 98,
|
|
* 287, 109, 41, 98
|
|
* ]
|
|
* });
|
|
*/
|
|
Factory.addGetterSetter(Sprite, 'frameOffsets');
|
|
/**
|
|
* get/set frame offsets map
|
|
* @name Konva.Sprite#frameOffsets
|
|
* @method
|
|
* @param {Object} frameOffsets
|
|
* @returns {Object}
|
|
* @example
|
|
* // get frame offsets map
|
|
* var offsets = sprite.frameOffsets();
|
|
*
|
|
* // set frame offsets map
|
|
* sprite.frameOffsets({
|
|
* standing: [
|
|
* // x, y (6 frames)
|
|
* 0, 0,
|
|
* 0, 0,
|
|
* 5, 0,
|
|
* 0, 0,
|
|
* 0, 3,
|
|
* 2, 0
|
|
* ],
|
|
* kicking: [
|
|
* // x, y (6 frames)
|
|
* 0, 5,
|
|
* 5, 0,
|
|
* 10, 0,
|
|
* 0, 0,
|
|
* 2, 1,
|
|
* 0, 0
|
|
* ]
|
|
* });
|
|
*/
|
|
Factory.addGetterSetter(Sprite, 'image');
|
|
/**
|
|
* get/set image
|
|
* @name Konva.Sprite#image
|
|
* @method
|
|
* @param {Image} image
|
|
* @returns {Image}
|
|
* @example
|
|
* // get image
|
|
* var image = sprite.image();
|
|
*
|
|
* // set image
|
|
* sprite.image(imageObj);
|
|
*/
|
|
Factory.addGetterSetter(Sprite, 'frameIndex', 0, getNumberValidator());
|
|
/**
|
|
* set/set animation frame index
|
|
* @name Konva.Sprite#frameIndex
|
|
* @method
|
|
* @param {Integer} frameIndex
|
|
* @returns {Integer}
|
|
* @example
|
|
* // get animation frame index
|
|
* var frameIndex = sprite.frameIndex();
|
|
*
|
|
* // set animation frame index
|
|
* sprite.frameIndex(3);
|
|
*/
|
|
Factory.addGetterSetter(Sprite, 'frameRate', 17, getNumberValidator());
|
|
/**
|
|
* get/set frame rate in frames per second. Increase this number to make the sprite
|
|
* animation run faster, and decrease the number to make the sprite animation run slower
|
|
* The default is 17 frames per second
|
|
* @name Konva.Sprite#frameRate
|
|
* @method
|
|
* @param {Integer} frameRate
|
|
* @returns {Integer}
|
|
* @example
|
|
* // get frame rate
|
|
* var frameRate = sprite.frameRate();
|
|
*
|
|
* // set frame rate to 2 frames per second
|
|
* sprite.frameRate(2);
|
|
*/
|
|
Factory.backCompat(Sprite, {
|
|
index: 'frameIndex',
|
|
getIndex: 'getFrameIndex',
|
|
setIndex: 'setFrameIndex',
|
|
});
|