搜索
查看: 1127|回复: 0

miniblink使用ArrayBuffer快速传输数据演示( 已更新 )

[复制链接]

185

主题

2541

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
13973
发表于 2018-7-14 16:07:53 | 显示全部楼层 |阅读模式
使用miniblink, javascript中的ArrayBuffer类型与aardio中的buffer(缓冲区)类型会自动做双向转换,因为这是使用内存指针直接传输数据,因此比普通的数组、或者字符串传输数据要会快很多。

上次发过一个帖子,《miniblink,在网页中也玩GDI+自绘动画》: http://bbs.aardio.com/forum.php?mod=viewthread&tid=22373 这个例子里就用到了ArrayBuffer,比Base64是快多了,但比起本地代码动画的速度仍然明显慢了很多。这次我们改用一个更直接的方法,直接往Canvas画布的内存写图像数据,仍然是使用ArrayBuffer传输内存数据。根据我的测试,用这个方法速度很快,动画的速度不输于本地代码,下面看代码:

为了简化代码,刚才添加了mb.jsSwapImageBuffer,mb.jsImageData等几个库函数,
请在运行下面代码以前先更新 web.blink扩展库。
import win.ui;
/*DSG{{*/
var winform = win.form(text="miniblink - 网页GDI+自绘动画优化版本";right=848;bottom=585)
winform.add()
/*}}*/

import web.blink.form;
var mb = web.blink.form(winform)

mb.html =
/**
<!doctype html>
<html>
<head>
</head>
<body style="margin:100px;">
    <div id="header"></div>
    <canvas id="myCanvas" width=501 height=500>canvas</canvas>
    <br><a href="#">其实人家真的是一个网页</a>
</body>
</html>
**/


winform.show();
mb.wait();

import gdip;
var rotationAngle = 0;
winform.addtimer( 12,
   
function(hwnd,msg,id,tick){

        
var w,h = 200,200;
        
var bmp = gdip.bitmap(w,h);
        
var graphics = bmp.getGraphics();
        graphics.smoothingMode = 4
/*_GdipSmoothingModeAntiAlias*/
         
        rotationAngle+=5;
        graphics.rotateRect(::RECT(0,0,w,h),rotationAngle);
        
var brush = gdip.solidBrush(0xFF84FF26);
        
var brush2 = gdip.solidBrush(0xFF0080FF);
        graphics.fillPie(brush, 0, 0, w, h, 90, 180);
        graphics.fillPie(brush2, 0, 0, w, h, 90, -180);
        graphics.fillPie(brush, w/4-1, h/2, w/2, h/2, 90, -180);
        graphics.fillPie(brush2, w/4+1, 0, w/2, h/2, 90, 180);
        graphics.fillEllipse(brush, w/2-10, h/4-10, 20, 20);
        graphics.fillEllipse(brush2, w/2-10, h/4*3-10, 20, 20);
        graphics.delete();
        brush.delete();
        brush2.delete();
        
        
//获取GDI+位图
        var data = bmp.lockMemory(,0x26200A/*_PixelFormat32bppARGB*/)

        
/*
        GDI+获取的缓冲区与网页图像缓冲区R,B字节是反过来的,
        可以用下面的函数反转该字节(也可以在前面反过来写颜色值,外部图像文件事先处理,这里就不用做运行时转换)
        */

        mb.jsSwapImageBuffer(data)
         
        
//转换为JS图像数据,可以查看此函数源代码了解具体实现
        var jsImgData = mb.jsImageData( data )
        
        mb.getEle(
"myCanvas").getContext("2d").putImageData( jsImgData ,0,0);
        bmp.dispose();
    }
)

win.loopMessage();


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

手机版|未经许可严禁引用或转载本站文章|站长邮箱|aardio.com|aardio官方社区 ( 皖ICP备09012014号 )

GMT+8, 2018-10-20 03:35 , Processed in 0.062500 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表