桌面切换想法的demo

最新推荐文章于 2020-05-22 16:15:34 发布

jiyinyiyong

最新推荐文章于 2020-05-22 16:15:34 发布

阅读量418

点赞数 1

文章标签： function each class events timer border

本文链接：https://blog.csdn.net/jiyinyiyong/article/details/6342103

版权

多桌面在linux很普遍,gnome3和KDE都有强大的控制,

我最初想到的时候不多接触到,

恰好双三进制对于位置切换表述很清晰,

我于是做了demo,演示部分想法.

本来计划(3*3)*(3*3)桌面的,本事不够,放弃..而且太小了看不清的..

完成之后,,几个规则:

单个桌面规定为0级,为最下级,最大为n级,

我这儿n=2;按下数字之后:

如果存在下级,渐变到对应下级桌面;

否则,如果是数字5,以该桌面为中心渐变到上级,

没有下级且不是5,如果这里可以,朝数字对应方向移动一个桌面,

如果这里不可以,渐变到上一级,同时使该桌面中心改变位置尽量小,

上面是简化的咯,,

当n>2时,还要一个0键,那么整个规则大意就是:

0返回上级,非0进入数字对应下级或朝对应方向移动,

同时保持渐变初始的桌面中心移动尽量小.

这还是过于简化,,如果数学可能,

划分的方式不应该全是方形,,或者杂乱的图形,,

窗口打开覆盖的是某级桌面而不是某个,,

太多我不敢想象了.

至于为什么采用双三进制?我在考虑n=3时考虑过, 其实,n=2的确用不上,,

一旦n>2,,,计算位置就会十分复杂,而双三进制从理解上十分简单,

至于实际编程能否简单很多,我不知道,,,

录的视频放在土豆,",多个桌面,canvas,demo"..加了段compiz..

下面上html,,直在火狐4检验,主函数的draw()会占用时间,,我没干掉,,

所以等字消失之后才可以进行第一次点击...

<html> <head> <link rel="stylesheet"href="top.css"/> <mce:script src="top.js" mce_src="top.js"></mce:script> </head> <body> <nav id="main"> <canvas id="canvas"></canvas> <nav id="box"> </nac> </nav> </body> </html> body{ background:rgba(200,200,255,1);} #main{ border:1px rgba(100,100,200,0.5); width:1200px; height:600px; display:-moz-box; -moz-box-orient:horizontal;} #box{ background:rgba(0,0,0,0.4); height:600px; width:400px; display:-moz-box; -moz-box-orient:vertical;} .hor{ display:-moz-box; -moz-box-orient:horizontal; margin:0px 20px;} .each{ background:rgba(150,150,200,1); padding:20px; font-size:20px; width:80px; height:80px; margin:10px; max-width:80px;} #content{ margin:10px 30px; color:rgba(255,255,255,1); font-size:30px;} window.οnlοad=main; var canvas,ctx,eac,content; function main(){ canvas=document.getElementById('canvas'); ctx=canvas.getContext('2d'); clear(canvas); var box=document.getElementById('box'); for(var i=0;i<3;i++){ var hor=document.createElement('header'); hor.setAttribute('class','hor'); hor=four_each(hor); box.appendChild(hor);} var eachs=document.getElementsByClassName('each'); sign(eachs); eachs[0].οnclick=function(){ alert(g.sx);} draw(); eac=document.getElementsByClassName('each'); content=document.createElement('nav'); content.innerHTML='本事有限,,只做9个桌面的了'; content.id='content'; box.appendChild(content); add_events(eachs,g);} function four_each(elem){ for(var i=0;i<3;i++){ var each=document.createElement('nav'); each.setAttribute('class','each'); elem.appendChild(each);} return elem;} function add_attr(hor,each){ hor.setAttribute('class','hor'); each.setAttribute('class','each');} function clear(canvas){ canvas.setAttribute('width','640px'); canvas.setAttribute('height','640px'); var ctx=canvas.getContext('2d'); ctx.fillRect(0,0,640,640);} function set_eachs(eachs){ for(var i in eachs){ eachs[i].onlick='show_console(i);';}} function sign(eachs){ for(var i=1;i<10;i++){ eachs[i-1].innerHTML=look(i);}} function add_events(eachs,g){ for(var i=0;i<9;i++){ eachs[i].setAttribute('onclick','busy('+Number(i)+');');}} var g={ x:20, y:20, l:600, nx:20, ny:20, nl:600}; function busy(n){ console.log(typeof n,'0'); g.x=g.nx; g.y=g.ny; g.l=g.nl; //console.log(g.x,g.y,g.l,g.nx,g.ny,g.nl); if(g.l==600){ g.nx=g.x-600*(n%3)-00; g.ny=g.y-600*(n-n%3)/3-00; console.log('600'); g.nl=1800;} else if(g.l==1800){ if(n==4){ g.nx=20; g.ny=20; console.log('1800,if'); g.nl=600;} else{ g.nx=g.x-600*(n%3-1); g.ny=g.y-600*((n-n%3)/3-1); g.nl=1800; if(g.nx+1800<610 || g.ny+1800<610 || g.nx>60 || g.ny>60){ g.nx=20; g.ny=20; g.nl=600; content.innerHTML='到达边界,回全景'; console.log('edge and quit');}}} console.log(g.x,g.y,g.l,'->',g.nx,g.ny,g.nl); eac[n].style.background='rgba(255,255,155,1)'; console.log('color begin'); if(g.nl==600){ if(content.innerHTML==''){ content.innerHTML='回到全景';}} else{ content.innerHTML='沿着'+look(n+1)+'方向滑过去';} draw(n);} function draw(){ //ctx.clearRect(0,0,640,640); //ctx.fillStyle='rgba(0,0,0,1)'; //ctx.fillRect(0,0,640,640); var a=100,b=0; var dx=g.nx-g.x,dy=g.ny-g.y,dl=(g.nl-g.l)/3; var timer=setInterval(rrr,20); function rrr(){ ctx.clearRect(0,0,640,640); ctx.fillStyle='rgba(0,0,0,1)'; ctx.fillRect(0,0,640,640); //console.log(g.x,g.y,g.l,'->',g.nx,g.ny,g.nl); var px=g.x+b/a*dx; var py=g.y+b/a*dy; var pl=g.l/3+b/a*dl; //console.log(px,py,pl); for(var i=0;i<9;i++){ if(i%2==0){ ctx.fillStyle='rgba(255,200,100,1)';} else{ ctx.fillStyle='rgba(180,180,255,1)';} ctx.fillRect(px+(i%3)*pl,py+(i-i%3)/3*pl,pl,pl);} b+=1; if(b>a){ clearInterval(timer); for(var i=0;i<9;i++){ content.innerHTML=''; eac[i].style.background='rgba(150,150,255,1)';}}}} function look(n){ switch(n){ case 0:return '0'; case 1:return '6'; case 2:return '1'; case 3:return '8'; case 4:return '7'; case 5:return '5'; case 6:return '3'; case 7:return '2'; case 8:return '9'; case 9:return '4'; default:return 'unrecognized';}}

jiyinyiyong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
桌面切换想法的demo

<br />多桌面在linux很普遍,gnome3和KDE都有强大的控制,<br />我最初想到的时候不多接触到,<br />恰好双三进制对于位置切换表述很清晰,<br />我于是做了demo,演示部分想法.<br />本来计划(3*3)*(3*3)桌面的,本事不够,放弃..而且太小了看不清的..<br />完成之后,,几个规则:<br />单个桌面规定为0级,为最下级,最大为n级,<br />我这儿n=2;按下数字之后:<br />如果存在下级,渐变到对应下级桌面;<br />否则,如果是数字5,以该桌面
复制链接

扫一扫