From f9af24e6bc341ad7a7061aea935287984923cabb Mon Sep 17 00:00:00 2001 From: Gunther Brunner Date: Thu, 27 Feb 2014 18:50:17 +0900 Subject: [PATCH] Making render resize. --- .../stf/screen/fast-image-render/index.js | 124 ++++++++++++++---- .../test/performance_test.js | 42 +++--- res/app/components/stf/screen/index.js | 2 +- 3 files changed, 116 insertions(+), 52 deletions(-) diff --git a/res/app/components/stf/screen/fast-image-render/index.js b/res/app/components/stf/screen/fast-image-render/index.js index e413c39b..f3a1458e 100644 --- a/res/app/components/stf/screen/fast-image-render/index.js +++ b/res/app/components/stf/screen/fast-image-render/index.js @@ -3,8 +3,7 @@ // See http://jsperf.com/canvas-drawimage-vs-webgl-drawarrays -// TODO: add ability to resize -function FastImageLoader(url, size) { +function FastImageLoader(url) { var that = this this.loader = new Image() @@ -13,20 +12,23 @@ function FastImageLoader(url, size) { } this.loader.onload = function () { - - if (typeof(this.onLoad) === 'function') { + if (typeof(that.onLoad) === 'function') { that.onLoad(this) } } this.loader.onerror = function () { - if (typeof(this.onError) === 'function') { + if (typeof(that.onError) === 'function') { that.onError(this) } } } +/** + * Loads an URL + * @param {string} url + */ FastImageLoader.prototype.load = function (url) { this.loader.src = url } @@ -48,17 +50,12 @@ function CanvasRender(canvasElement, options) { if (!this.displayWidth || !this.displayHeight) { throw new Error('Unable to get display size canvas must have dimensions') } - }() + } this.options = options this.context = canvasElement.getContext('2d') } -CanvasRender.prototype.resize = function (width, height) { - this.displayWidth = width - this.displayHeight = height -} - CanvasRender.prototype.draw = function (image) { this.context.drawImage(image, 0, 0) } @@ -80,7 +77,7 @@ function WebGLRender(canvasElement, options) { if (!this.displayWidth || !this.displayHeight) { throw new Error('Unable to get display size canvas must have dimensions') } - }() + } this.options = { // alpha: this.transparent, @@ -167,13 +164,8 @@ WebGLRender.prototype.setup = function () { } -WebGLRender.prototype.resize = function (width, height) { - this.displayWidth = width - this.displayHeight = height -} - WebGLRender.prototype.draw = function (image) { - tex = this.ctx.createTexture() + var tex = this.ctx.createTexture() this.ctx.bindTexture(this.ctx.TEXTURE_2D, tex) this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.NEAREST) this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.NEAREST) @@ -201,17 +193,18 @@ WebGLRender.prototype.clear = function () { function FastImageRender(canvasElement, options) { this.options = options || {} + this.canvasElement = canvasElement + + if (this.options.render === 'webgl') { this.render = new WebGLRender(canvasElement, options) + } else if (this.options.render === 'pixi') { + this.render = new PixiRender(canvasElement, options) } else { this.render = new CanvasRender(canvasElement, options) } } -FastImageRender.prototype.resize = function (width, height) { - this.render.resize(width, height) -} - FastImageRender.prototype.draw = function (image) { this.render.draw(image) } @@ -220,8 +213,91 @@ FastImageRender.prototype.clear = function () { this.render.clear() } +Object.defineProperty(FastImageRender.prototype, 'canvasWidth', { + get: function () { + return this.canvasElement.width + }, + set: function (width) { + if (width) { + if (width !== this.canvasElement.width) { + this.canvasElement.width = width; + } + } + } +}) + +Object.defineProperty(FastImageRender.prototype, 'canvasHeight', { + get: function () { + return this.canvasElement.height + }, + set: function (height) { + if (height) { + if (height !== this.canvasElement.height) { + this.canvasElement.height = height; + } + } + } +}) + +Object.defineProperty(FastImageRender.prototype, 'displayWidth', { + get: function () { + return this.canvasElement.width + }, + set: function (width) { + if (width) { + if (width !== this.canvasElement.width) { + this.canvasElement.width = width; + } + } + } +}) + +Object.defineProperty(FastImageRender.prototype, 'displayHeight', { + get: function () { + return this.canvasElement.height + }, + set: function (height) { + if (height) { + if (height !== this.canvasElement.height) { + this.canvasElement.height = height; + } + } + } +}) + +Object.defineProperty(FastImageRender.prototype, 'canvasStyleWidth', { + get: function () { + return parseInt(this.canvasElement.style.width, 10) + }, + set: function (width) { + if (width) { + var styleWidth = width + 'px' + if (styleWidth !== this.canvasElement.style.width) { + this.canvasElement.style.width = styleWidth; + } + } + } +}) + +Object.defineProperty(FastImageRender.prototype, 'canvasStyleHeight', { + get: function () { + return parseInt(this.canvasElement.style.height, 10) + }, + set: function (height) { + if (height) { + var styleHeight = height + 'px' + if (styleHeight !== this.canvasElement.style.height) { + this.canvasElement.style.height = height; + } + } + } +}) + + // Check for Non CommonJS world if (typeof module !== 'undefined') { - module.exports = FastImageRender + module.exports = { + FastImageRender: FastImageRender, + FastImageLoader: FastImageLoader + } } - diff --git a/res/app/components/stf/screen/fast-image-render/test/performance_test.js b/res/app/components/stf/screen/fast-image-render/test/performance_test.js index 2eb1541d..97e4ecae 100644 --- a/res/app/components/stf/screen/fast-image-render/test/performance_test.js +++ b/res/app/components/stf/screen/fast-image-render/test/performance_test.js @@ -1,51 +1,39 @@ var canvasElement = document.querySelector('canvas') var frameNumberElement = document.querySelector('#frame-number') -var loader = new Image() var width = 300 var height = 300 -var frames = { +var frame = { total: 5, current: 0 } - -function loadScreen() { -// loader.src = 'http://placehold.it/' + width + 'x' + height + '?' + Date.now() -// loader.src = 'http://lorempixel.com/' + width + '/' + height + '/abstract/Frame-' + frames.current + '/?' + Date.now() - console.time('load') - loader.src = 'screen.jpg?' + Date.now() -} - -loadScreen() - -var imageLoader = new FastImageLoader('screen.jpg?' + Date.now()) - -imageLoader.onLoad = function (image) { - console.log(image) -} - +var imageLoader = new FastImageLoader() var imageRender = new FastImageRender(canvasElement, {render: 'canvas'}) +function loadNext() { + console.time('load') + // loader.src = 'http://placehold.it/' + width + 'x' + height + '?' + Date.now() + // loader.src = 'http://lorempixel.com/' + width + '/' + height + '/abstract/Frame-' + frames.current + '/?' + Date.now() + imageLoader.load('screen.jpg?' + Date.now()) +} -loader.onload = function () { +loadNext() + +imageLoader.onLoad = function (image) { console.timeEnd('load') console.time('draw') - imageRender.draw(this) + imageRender.draw(image) console.timeEnd('draw') - frameNumberElement.innerHTML = frames.current + frameNumberElement.innerHTML = frame.current - if (frames.current++ < frames.total) { - loadScreen() + if (frame.current++ < frame.total) { + loadNext() } else { } - } -loader.onerror = function (err) { - console.error(err) -} diff --git a/res/app/components/stf/screen/index.js b/res/app/components/stf/screen/index.js index 3139367b..f06b65f5 100644 --- a/res/app/components/stf/screen/index.js +++ b/res/app/components/stf/screen/index.js @@ -2,4 +2,4 @@ module.exports = angular.module('stf/screen', [ require('stf/screen/scaling').name ]) .directive('deviceScreen', require('./screen-directive')) - .controller('DeviceScreenCtrl', require('./screen-controller')) \ No newline at end of file + .controller('DeviceScreenCtrl', require('./screen-controller'))