aardio官方社区

 找回密码
 注册会员

!connect_header_login!

只需一步,快速开始

搜索
查看: 3877|回复: 1

miniblink,在网页中也玩GDI+自绘动画

[复制链接]

188

主题

2544

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
14186
发表于 2018-4-2 15:46:54 | 显示全部楼层 |阅读模式
请注意先更新 web.blink的扩展库最新版,
miniblink最新版才支持通过ArrayBuffer实现以内存指针快速传输数据,不然通过其他DataURL,Base64之类转换就太慢了。

aardio中的buffer类型会自动转换为js中的ArrayBuffer,
所以只要数据加载到buffer中,然后直接传给JS就是ArrayBuffer。

下面看源码:
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>
    <div id="header"></div>
    <img id="test" width=501 height=500>
    <br><a href="#">其实人家真的是一个网页</a>
</body>
</html>
**/


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

mb.doScript(
`
loadObjectUrl = function(id,buffer,type) {
    var img = document.getElementById(id);
    var blob =  new Blob([buffer],{type:type});  
    img.objectUrl =  URL.createObjectURL(blob);   
  
    img.onload = function(){
        //objectUrl一定要在图像成功加载后释放
        URL.revokeObjectURL(img.objectUrl);
        img.objectUrl = null;
    }
   
    img.src = img.objectUrl;
    img.width = 500;//首次显示修改大小强制刷新
};`
)

import gdip;
var rotationAngle = 0;

winform.setInterval( 10,
   
function(hwnd,msg,id,tick){
        
var img = mb.getEle("test");
        
if(img.objectUrl) return;//避免重复创建objectUrl造成内存泄漏,这种可能性小
        
        
var width,height = 500,500;
        
var bmp = gdip.bitmap(width,height);
        
var graphics = bmp.getGraphics();
        graphics.smoothingMode = 4
/*_GdipSmoothingModeAntiAlias*/
        
        graphics.translate( width/2, height/2);
        rotationAngle+=5;
        graphics.rotate(rotationAngle);
   
        
var brush = gdip.solidBrush(0xFF00FFFF);
        
var brush2 = gdip.solidBrush(0xFF0000FF);
        graphics.fillPie(brush, -100, -100, 200, 200, 90, 180);
        graphics.fillPie(brush2, -100, -100, 200, 200, 90, -180);
        graphics.fillPie(brush, -51, 0, 100, 100, 90, -180);
        graphics.fillPie(brush2, -49, -100, 100, 100, 90, 180);
        graphics.fillEllipse(brush, -10, -60, 20, 20);
        graphics.fillEllipse(brush2, -10, 40, 20, 20);
        
        
//生成objectUrl,并让图像加载objectUrl
        mb.script.loadObjectUrl ("test",bmp.saveToBuffer("*.png"),"image/png");
        
        brush.delete();
        brush2.delete();
        bmp.dispose();
    }
)

win.loopMessage();


回复

使用道具 举报

0

主题

9

帖子

64

积分

一级会员

Rank: 2

积分
64
发表于 2018-4-2 17:16:52 | 显示全部楼层
大大辛苦啦 miniblink这个组件太好玩啦哈哈哈 第七课我终于看完啦 谢谢您的教诲
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2021-7-24 19:46 , Processed in 0.046391 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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