![](/img/trans.png)
[英]Does JavaScript have a language construct similar to the php list command?
[英]Does javascript have a blit or memcpy command?
我已經構建了自己的flip
命令,並且它很慢並且需要永遠。 我想知道javascript是否有blit
或memcpy
樣式命令。 現在,我正在逐個項目地使用for循環進行復制,它需要“永遠”。
以下是我的翻轉功能的示例用法。 我正在運行3層,如果全高,則只有1層,有3個簡單的動畫,fps以35 FPS的速度突出。 理想情況下,在遠遠高於FPS的情況下,應該有3個位置,在我預期的200+范圍內。
v:36.8 l0:36.8 l1:57.8 l2:36.8圖層的FPS是對其緩沖區的渲染,v是使用flip
函數渲染到畫布。 (這些FPS來自Mac上的Chrome)
v = the screen update, the main flip function listed below.
l0 = The bottom fire, its a full height layer
l2 = The static noise, its a 1/2 height layer
l3 = The top fire, its a 1/4 height layet
想象一下,有9層或10層,FPS會像石頭一樣掉落。 在FF版本12中,它已經無法使用......甚至沒有兩位數的FPS費率。 歌劇至少是雙倍的。
v:4.2 l0:4.2 l1:4.2 l2:4.2 (FF 12 OSX)
v:15.5 l0:15.5 l1:15.5 l2:15.5 (Opera latest OSX)
我的翻轉功能
flip : function() {
var fps = '';
// Combine the layers onto the back buffer
for (var l = 0; l < this.layers.length; l++)
{
fps += 'l' + l + ':' + this.layers[l].fps.toFixed(1) + ' ';
var layerWidth = this.layers[l].options.width;
var layerHeight = this.layers[l].options.height;
for (var x = 0; x < layerWidth; x++)
{
for (var y = 0; y < layerHeight; y++)
{
var index = (y*this.layers[l].options.width + x)*4;
var r = this.layers[l].buffer[index+0];
var g = this.layers[l].buffer[index+1];
var b = this.layers[l].buffer[index+2];
var a = this.layers[l].buffer[index+3];
if (r|g|b|a != 0) {
this.buffer.data[index+0] = r;
this.buffer.data[index+1] = g;
this.buffer.data[index+2] = b;
this.buffer.data[index+3] = a;
}
}
}
}
fps = 'v:' + this.fps.toFixed(1) + ' ' + fps;
this.$fps.html(fps);
// blit the buffer
this.context.putImageData(this.buffer, 0, 0);
// Calculate fps
var now = new Date;
var thisFrameFPS = 1000 / (now - this.last);
this.fps += (thisFrameFPS - this.fps) / 50;
this.last = now;
var t = this;
setTimeout(function() {t.flip.apply(t);}, this.speed);
}
您的代碼可以改進,但我懷疑加速是否會很重要。
這是我想出來的,請注意它未經測試。 我假設處理圖層的順序並不重要,如果它是用您的版本替換第一個for循環。
function flip () {
var fps = '';
// Combine the layers onto the back buffer
for (var l = this.layers.length; l--;) {
fps += 'l' + l + ':' + this.layers[l].fps.toFixed (1) + ' ';
var layerWidth = this.layers[l].options.width;
var layerHeight = this.layers[l].options.height;
for (var index = 0, x = layerWidth; x--;) {
for (var y = layerHeight; y--; index += 4) {
var r = this.layers[l].buffer[index+0];
var g = this.layers[l].buffer[index+1];
var b = this.layers[l].buffer[index+2];
var a = this.layers[l].buffer[index+3];
if (r|g|b|a != 0) {
this.buffer.data[index+0] = r;
this.buffer.data[index+1] = g;
this.buffer.data[index+2] = b;
this.buffer.data[index+3] = a;
}
}
}
}
};
假設r,g,b和a都是8位量化,您可以考慮將它們打包成單個int。 這將減少內循環中的處理。 更高效的是使用新的arrayBuffer工具
有一個memcpy.js使用Typed Array .prototype .subarray()(如果可用)。
瀏覽器支持很好 ,甚至IE10都有subarray
。
function memcpy (src, srcOffset, dst, dstOffset, length) {
var i
src = src.subarray || src.slice ? src : src.buffer
dst = dst.subarray || dst.slice ? dst : dst.buffer
src = srcOffset ? src.subarray ?
src.subarray(srcOffset, length && srcOffset + length) :
src.slice(srcOffset, length && srcOffset + length) : src
if (dst.set) {
dst.set(src, dstOffset)
} else {
for (i=0; i<src.length; i++) {
dst[i + dstOffset] = src[i]
}
}
return dst
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.