diff --git a/src/BitmapSkin.js b/src/BitmapSkin.js index 8db2004..3279756 100644 --- a/src/BitmapSkin.js +++ b/src/BitmapSkin.js @@ -55,8 +55,9 @@ class BitmapSkin extends Skin { * Set the contents of this skin to a snapshot of the provided bitmap data. * @param {ImageData|HTMLImageElement|HTMLCanvasElement|HTMLVideoElement} bitmapData - new contents for this skin. * @param {int} [costumeResolution=1] - The resolution to use for this bitmap. + * @param {bool} [calculateRotationCenter=false] - Set the rotation center to the bitmap center */ - setBitmap (bitmapData, costumeResolution) { + setBitmap (bitmapData, costumeResolution, calculateRotationCenter) { const gl = this._renderer.gl; if (this._texture) { @@ -78,6 +79,8 @@ class BitmapSkin extends Skin { this._costumeResolution = costumeResolution || 1; this._textureSize = BitmapSkin._getBitmapSize(bitmapData); + if (calculateRotationCenter) this.setRotationCenter.apply(this, this.calculateRotationCenter()); + this.emit(Skin.Events.WasAltered); } diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js index 2caa6ec..bc38295 100644 --- a/src/RenderWebGL.js +++ b/src/RenderWebGL.js @@ -140,10 +140,11 @@ class RenderWebGL { * Use `createBitmapSkin` or `createSVGSkin` instead. * @param {!string} skinUrl The URL of the skin. * @param {!int} [costumeResolution] Optional: resolution for the skin. Ignored unless creating a new Bitmap skin. + * @param {!boolean} [calculateRotationCenter] Optional: set the rotation center of the skin to the box center * @returns {!int} The ID of the Skin. * @deprecated */ - createSkinFromURL (skinUrl, costumeResolution) { + createSkinFromURL (skinUrl, costumeResolution, calculateRotationCenter) { if (this._skinUrlMap.hasOwnProperty(skinUrl)) { const existingId = this._skinUrlMap[skinUrl]; @@ -179,7 +180,7 @@ class RenderWebGL { url: skinUrl }, (err, response, body) => { if (!err) { - newSkin.setSVG(body); + newSkin.setSVG(body, calculateRotationCenter); } }); } else { @@ -187,7 +188,7 @@ class RenderWebGL { const img = new Image(); img.crossOrigin = 'anonymous'; img.onload = () => { - newSkin.setBitmap(img, costumeResolution); + newSkin.setBitmap(img, costumeResolution, calculateRotationCenter); }; img.src = skinUrl; } @@ -679,7 +680,12 @@ class RenderWebGL { // TODO: remove this after fully deprecating URL-based skin paths if ('skin' in properties) { const {skin, costumeResolution} = properties; - const skinId = this.createSkinFromURL(skin, costumeResolution); + const skinId = this.createSkinFromURL( + skin, + costumeResolution, + // If no rotationCenter, calculate one + !('rotationCenter' in properties) + ); drawable.skin = this._allSkins[skinId]; } if ('skinId' in properties) { diff --git a/src/SVGSkin.js b/src/SVGSkin.js index 345c61f..8272c36 100644 --- a/src/SVGSkin.js +++ b/src/SVGSkin.js @@ -53,8 +53,9 @@ class SVGSkin extends Skin { /** * Set the contents of this skin to a snapshot of the provided SVG data. * @param {string} svgData - new SVG to use. + * @param {bool} [calculateRotationCenter=false] set the rotation center to the SVG center */ - setSVG (svgData) { + setSVG (svgData, calculateRotationCenter) { this._svgRenderer.fromString(svgData, () => { const gl = this._renderer.gl; if (this._texture) { @@ -71,6 +72,7 @@ class SVGSkin extends Skin { this._texture = twgl.createTexture(gl, textureOptions); } + if (calculateRotationCenter) this.setRotationCenter.apply(this, this.calculateRotationCenter()); this.emit(Skin.Events.WasAltered); }); } diff --git a/src/Skin.js b/src/Skin.js index a307134..90d7de9 100644 --- a/src/Skin.js +++ b/src/Skin.js @@ -83,6 +83,14 @@ class Skin extends EventEmitter { } } + /** + * Get the center of the current bounding box + * @return {[number,number]} the center of the current bounding box + */ + calculateRotationCenter () { + return [this.size[0] / 2, this.size[1] / 2]; + } + /** * @abstract * @param {[number,number]} scale - The scaling factors to be used.