最简单的实现音频条的方法

liaolj03 · 发表于 2018-8-9 09:35:41

import win.ui;
/*DSG{{*/
var winform = win.form(text="htmlayout播放器进度条";right=759;bottom=469)
winform.add(
picturebox2={cls="picturebox";left=357;top=91;right=362;bottom=132;bgcolor=0;z=2};
plus={cls="plus";left=333;top=85;right=383;bottom=262;background="\res\images\camTone.png";border={left=100};foreRight=100;foreTop=100;repeat="center";y=100;z=1}
)
/*}}*/
winform.show()
math.randomize();
var mmat=50;
tmid = winform.setInterval(
100/*毫秒*/,
function(hwnd,msg,id,tick){//定时执行代码
var mat=math.random(0,100)
if(mat>=5){
winform.picturebox2.height=mmat+mat;
}else {
winform.picturebox2.height=mmat-mat;
}
}
);
win.loopMessage();

复制代码

用黑色控件覆盖底图，不过有一个缺点就是，有时候控件会刷灰色，，哇哈哈，

JacenHe · 发表于 2018-8-9 12:14:31

我觉得你是不是想复杂了，
plus控件本来就可以指定背景、前景合成音频条的效果，只不过示例里我用了色块，你当然可以改成图像。

变成灰的是因为plus你默认开了剪切背景，关掉就可以了。
另外控件一般是不能这样简单的前后叠加的，这个开始页的教徎里就有讲。

liaolj03 · 发表于 2018-8-9 14:51:16

//自绘动画
import win.ui;
/*DSG{{*/
var winform = win.form(text="自定义动画演示";right=455;bottom=286;border="thin")
winform.add(
plus={cls="plus";left=156;top=31;right=206;bottom=213;background="\res\images\camTone.png";repeat="tile";z=1}
)
/*}}*/
math.randomize();
tmid = winform.setInterval(
100/*毫秒*/,
function(hwnd,msg,id,tick){//定时执行代码
var by=math.random(0,142)
var b2y=math.random(0,142)
var graphics = gdip.graphics(winform.plus)
// graphics.clear()
var brush = gdip.solidBrush(0xFF000000);
var brush2 = gdip.solidBrush(0xFF000000);
graphics.fillRectangle(brush, 24, 9, 4, by);
graphics.fillRectangle(brush2, 29, 9, 4, b2y);
brush.delete();
brush2.delete();
graphics.delete();
}
);
winform.show()
win.loopMessage();

复制代码

这样吗，但是这样我不懂得怎么去清空PLUS的前景已画出的东西，
如果用// graphics.clear() 去覆盖，会把背景色一起覆盖了，如果用PLUS进度条的方式，那就更不知道怎么玩了，因为我这个图里有两个音频条，左声道和右声道，如果在同一个PLUS里，以我的水平，只能做到上边的方式了，还需努力学习，嘻，谢谢Jacen抽空来指导。

JacenHe · 发表于 2018-8-9 19:10:43

你勇于尝试新的思路，这是非常好的，
但是这种合成动画，plus控件可以很容易的合成，用多个控件去叠加反而不好控制 - 把事情给弄复杂了。

在窗体设计器里用plus控件设置好背景前景的位置就可以实现这个效果了，
示例代码：

音频条效果.不用写代码.用plus控件直接拖出来.7z (4.48 KB, 下载次数: 426)

用plus控件自绘当然也是可以的，但并不需要去清除图像，
你每次应当先画背景图，自然就擦除上次的绘图了，当然，控件绘图并不是到定时器里去画，而是在绘图回调函数里去画，你的定时器只要调用redraw函数重绘就可以了，下面是一个完整的例子（复制就可以运行看到效果了）

import win.ui;
/*DSG{{*/
var winform = win.form(text="自定义动画演示";right=455;bottom=286;border="thin")
winform.add(
plus={cls="plus";left=156;top=31;right=206;bottom=213;repeat="tile";z=1}
)
/*}}*/

import inet.http;
winform.plus.background = "http://bbs.aardio.com/data/attachment/forum/201808/09/093248gvbig6po2o2ev72o.png"

//自绘
winform.plus.onDrawForegroundEnd = function(graphics,rc){
   var brush = gdip.solidBrush(0xFF000000);
   graphics.fillRectangle(brush,24,9,4,owner.leftLevel:0);
   graphics.fillRectangle(brush,29,9,4,owner.rightLevel:0);
   brush.delete();
}

//定时器
winform.setInterval(
200, function(){
   winform.plus.leftLevel = math.random(0,142);
   winform.plus.rightLevel = math.random(0,142);
   winform.plus.redraw();
}
);

winform.show();
win.loopMessage();

liaolj03 · 发表于 2018-8-10 11:12:37

还是Jacen厉害，直中要害，这就是我最终想要的功能，昨天一直在想Jacen的直接用PLUS的进度条方式，搞了一天，没搞明白，今天试了下图片，好像可以，但是远没有Jacen这个来得简单。

import win.ui;
/*DSG{{*/
var winform = win.form(text="htmlayout播放器进度条";right=759;bottom=469)
winform.add(
plus={cls="plus";left=285;top=96;right=335;bottom=273;background="\res\images\camTone.png";border={left=100};clipBk=false;clipch=1;foreRight=100;foreTop=100;repeat="center";y=100;z=1};
plus3={cls="plus";left=399;top=112;right=440;bottom=294;x=3;z=2}
)
/*}}*/
winform.plus3.background = "~/res/images/camTonebg.png";//中心颜色
winform.plus3.foreground = "~/res/images/camTone.png";//环绕颜色
winform.plus3.setProgressRange(1,100)
var mmat=50;
tmid = winform.setInterval(
100/*毫秒*/,
function(hwnd,msg,id,tick){//定时执行代码
var mat=math.random(0,100)
if(mat>=5){
winform.plus3.progressPos=mmat+mat;
}else {
winform.plus3.progressPos=mmat-mat;
}
}
);
winform.show()
win.loopMessage();

复制代码

用两张图片来玩，不过想实现最终的效果，还是有点难，Jacen你这是雪中送炭呀，谢谢，超级感谢！！！！！

		自动登录	找回密码
密码			注册会员