aardio 范例: canvas - 桌面圆形时钟

//canvas - 桌面圆形时钟
//canvas 转为透明分层窗口（orphanWindow(true)）后可以画任意形状的窗口
import win.ui;
import time.lunar;
/*DSG{{*/
var winform = win.form(text="桌面圆形时钟";left=-20;top=-40;right=276;bottom=239;border="none";topmost=1)
winform.add(
clock={cls="canvas";left=0;top=0;right=277;bottom=240;anchors={left=1;top=1;right=1;bottom=1};z=1}
)
/*}}*/

/*
动静分层：
- 表盘是静态层，按尺寸与 DPI 缓存成位图，每帧整块复制。
- 指针与日期是动态层，每帧重画。

读时依赖的是表盘三分区而不是简单线段：
- 时针止于小时数字内沿，尺寸最短、面积最大。
- 分针穿过数字环，止于数字与分钟刻度之间，不接触刻度。
- 秒针最细最长，扫过刻度并保留配重尾。
*/

// 按暖白表盘半径统一计算边框、刻度、数字环与三针长度，避免表盘层和指针层各自约定。
var clockLayout = function(width,height,dpi){
    var centerX = width/2;
    var centerY = height/2;
    var outerRadius = math.min(centerX,centerY)-2*dpi;
    var rimRadius = outerRadius-1.4*dpi;
    var faceRadius = outerRadius-4.4*dpi;
    var tickOuter = faceRadius-6.2*dpi;
    var tickMinuteLen = 4.4*dpi;
    var numberRadius = faceRadius*0.72;

    // 分针穿过数字环，但停在数字与分钟刻度之间，不接触刻度。
    var tickInner = tickOuter-tickMinuteLen;
    var minuteLen = numberRadius+(tickInner-numberRadius)*0.55;

    return {
        centerX = centerX;
        centerY = centerY;
        outerRadius = outerRadius;
        rimRadius = rimRadius;
        faceRadius = faceRadius;
        tickOuter = tickOuter;
        tickMinuteLen = tickMinuteLen;
        tickHourLen = 8.6*dpi;
        tickQuarterLen = 11.2*dpi;
        numberRadius = numberRadius;
        hourLen = faceRadius*0.56;
        minuteLen = minuteLen;
        secondLen = tickOuter+0.6*dpi;
        secondTail = faceRadius*0.17;
        hourHalfW = 3.85*dpi;
        minuteHalfW = 2.45*dpi;
        secondWidth = 1.05*dpi;
        handTail = 3.6*dpi;
        hubOuter = 5.8*dpi;
        hubAccent = 3.5*dpi;
        hubPin = 1.55*dpi;
        weightR = 3.3*dpi;
    }
}

// 将 12 小时周期内的秒数转为画板角度。时针会把分、秒投影进小时区间。
var clockAngles = function(clockSeconds){
    return {
        hour = clockSeconds/3600*math.pi/6-math.pi/2;
        minute = (clockSeconds%3600)/60*math.pi/30-math.pi/2;
        second = (clockSeconds%60)*math.pi/30-math.pi/2;
    }
}

// 剜削式指针：腰部最宽，针尖收窄为尖点，便于对准刻度。
var fillTaperedHand = function(graphics,brush,cx,cy,angle,length,halfWidth,tail){
    var ca,sa = math.cos(angle),math.sin(angle);
    var nx,ny = -sa,ca;
    // 先保持稳定宽度，只在最后一段收成尖点，避免分针大半段细成像秒针。
    var waist = length*0.12;
    var neck = length*0.82;
    var tailW = halfWidth*0.78;
    var waistW = halfWidth;
    var neckW = halfWidth*0.55;

    graphics.fillPolygon(brush,0/*_FillModeAlternate*/,[ 
        [cx-tail*ca+nx*tailW,cy-tail*sa+ny*tailW],
        [cx+waist*ca+nx*waistW,cy+waist*sa+ny*waistW],
        [cx+neck*ca+nx*neckW,cy+neck*sa+ny*neckW],
        [cx+length*ca,cy+length*sa],
        [cx+neck*ca-nx*neckW,cy+neck*sa-ny*neckW],
        [cx+waist*ca-nx*waistW,cy+waist*sa-ny*waistW],
        [cx-tail*ca-nx*tailW,cy-tail*sa-ny*tailW]
    ]);
}

// -------------------- 静态表盘层 --------------------
var drawFace = function(graphics,layout,dpi,numberFont){
    /*
    边框使用三层实心圆构成，避免粗描边在圆周两侧裁切：
    深青灰外框负责收口，暖金内圈增加层次，最内层是暖白表盘。
    */
    var bezelBrush = gdip.solidBrush(0xFF26363D);
    var rimBrush = gdip.solidBrush(0xFFC7A45B);
    var faceBrush = gdip.solidBrush(0xFFF7F4EB);

    graphics.fillCircle(bezelBrush,layout.centerX,layout.centerY,layout.outerRadius);
    graphics.fillCircle(rimBrush,layout.centerX,layout.centerY,layout.rimRadius);
    graphics.fillCircle(faceBrush,layout.centerX,layout.centerY,layout.faceRadius);

    bezelBrush.delete();
    rimBrush.delete();
    faceBrush.delete();

    var minuteMarkPen = gdip.pen(0xFF9AA1A3,0.75*dpi);
    var hourMarkPen = gdip.pen(0xFF34444B,1.85*dpi);
    var quarterMarkPen = gdip.pen(0xFFAD7B2F,2.25*dpi);
    for(i,pen in [minuteMarkPen,hourMarkPen,quarterMarkPen]){
        pen.startCap = 2/*_LineCapRound*/;
        pen.endCap = 2/*_LineCapRound*/;
    }

    for(i=0;59;1){
        var angle = i*math.pi/30-math.pi/2;
        var tickLength = layout.tickMinuteLen;
        var markPen = minuteMarkPen;

        if(i%15==0){
            tickLength = layout.tickQuarterLen;
            markPen = quarterMarkPen;
        }
        elseif(i%5==0){
            tickLength = layout.tickHourLen;
            markPen = hourMarkPen;
        }

        graphics.drawLine(markPen,
            layout.centerX+(layout.tickOuter-tickLength)*math.cos(angle),
            layout.centerY+(layout.tickOuter-tickLength)*math.sin(angle),
            layout.centerX+layout.tickOuter*math.cos(angle),
            layout.centerY+layout.tickOuter*math.sin(angle)
        );
    }

    minuteMarkPen.delete();
    hourMarkPen.delete();
    quarterMarkPen.delete();

    var numberBrush = gdip.solidBrush(0xFF34444B);
    var strFormat = gdip.stringFormat();
    strFormat.align = 1/*_StringAlignmentCenter*/;
    strFormat.lineAlign = 1/*_StringAlignmentCenter*/;
    var boxW = layout.faceRadius*0.32;
    var boxH = layout.faceRadius*0.20;

    for(h=1;12;1){
        var hourAngle = (h%12)*math.pi/6-math.pi/2;
        var textX = layout.centerX+layout.numberRadius*math.cos(hourAngle);
        var textY = layout.centerY+layout.numberRadius*math.sin(hourAngle);
        graphics.drawString(tostring(h),numberFont,
            ::RECTF(textX-boxW/2,textY-boxH/2,boxW,boxH),
            strFormat,numberBrush
        );
    }

    numberBrush.delete();
    strFormat.delete();
}

// 表盘按像素尺寸与 DPI 缓存为 PARGB 位图（canvas 画布的格式，复制最快），尺寸或 DPI 改变时重建。
var faceLayer,faceKey;
var ensureFaceLayer = function(width,height,dpi){
    var key = width ++ "x" ++ height ++ "@" ++ dpi;
    if(faceLayer && faceKey === key) return faceLayer;
    if(faceLayer) faceLayer.delete();

    // 字体由调用方自己准备：数字用半粗体，字号随 DPI 缩放。
    var numberFont = gdip.font("Segoe UI Semibold",16*dpi,0/*_FontStyleRegular*/,2/*_UnitPixel*/)
        : gdip.font("Segoe UI",16*dpi,1/*_FontStyleBold*/,2/*_UnitPixel*/);

    faceLayer = gdip.bitmap(width,height,0xE200B/*_GdipPixelFormat32bppPARGB*/);
    var graphics = faceLayer.getGraphics();
    graphics.smoothingMode = 4/*_SmoothingModeAntiAlias*/;
    graphics.textRenderingHint = 4/*_TextRenderingHintAntiAlias*/;
    drawFace(graphics,clockLayout(width,height,dpi),dpi,numberFont);
    graphics.delete();
    numberFont.delete();

    faceKey = key;
    return faceLayer;
}

// 分层窗口模式下画布底色是全透明的，表盘圆形之外保持透明。
winform.clock.onDrawBackground = function(graphics,rc){
    var dpiX,dpiY = owner.dpiScale(1,1);
    var layer = ensureFaceLayer(rc.width,rc.height,math.min(dpiX,dpiY));

    // 表盘缓存与画布一样大，用 SourceCopy 整块复制（连同透明区域），比默认的混合模式快得多。
    graphics.compositingMode = 1/*_CompositingModeSourceCopy*/;
    graphics.drawImageRect(layer,0,0,rc.width,rc.height);
    graphics.compositingMode = 0/*_CompositingModeSourceOver*/;
}

// -------------------- 动态指针层 --------------------
var hourHandBrush,minuteHandBrush,secondHandPen;
var centerOuterBrush,centerAccentBrush,centerPinBrush;
var calendarFont,calendarDateBrush,calendarLunarBrush,calendarFormat;
var handDpiX,handDpiY = 0,0;

var releaseHandResources = function(){
    for(i,obj in [hourHandBrush,minuteHandBrush,secondHandPen,centerOuterBrush,centerAccentBrush,
        centerPinBrush,calendarFont,calendarDateBrush,calendarLunarBrush,calendarFormat]){
        obj.delete();
    }

    hourHandBrush = null;
    minuteHandBrush = null;
    secondHandPen = null;
    centerOuterBrush = null;
    centerAccentBrush = null;
    centerPinBrush = null;
    calendarFont = null;
    calendarDateBrush = null;
    calendarLunarBrush = null;
    calendarFormat = null;
}

var ensureHandResources = function(dpiX,dpiY){
    if(hourHandBrush
        && math.abs(handDpiX-dpiX)<0.001
        && math.abs(handDpiY-dpiY)<0.001) return;

    releaseHandResources();

    hourHandBrush = gdip.solidBrush(0xFF24343B);
    minuteHandBrush = gdip.solidBrush(0xFF3A4A51);
    secondHandPen = gdip.pen(0xFFDF5145,1.02*math.min(dpiX,dpiY));
    secondHandPen.startCap = 2/*_LineCapRound*/;
    secondHandPen.endCap = 2/*_LineCapRound*/;

    centerOuterBrush = gdip.solidBrush(0xFF26363D);
    centerAccentBrush = gdip.solidBrush(0xFFC7A45B);
    centerPinBrush = gdip.solidBrush(0xFFDF5145);

    // 日期文字比表盘数字小一档，并使用半透明深青灰色，清楚但不抢主视觉。
    calendarFont = gdip.font("Microsoft YaHei UI",10*math.min(dpiX,dpiY),0/*_FontStyleRegular*/,2/*_UnitPixel*/);
    calendarDateBrush = gdip.solidBrush(0xE0445258);
    calendarLunarBrush = gdip.solidBrush(0xE0445258);
    calendarFormat = gdip.stringFormat();
    calendarFormat.align = 1/*_StringAlignmentCenter*/;
    calendarFormat.lineAlign = 1/*_StringAlignmentCenter*/;

    handDpiX,handDpiY = dpiX,dpiY;
}

// 将系统时间转换为 12 小时周期内的秒数。
var readSystemClock = function(){
    var now = time();
    return (now.hour%12)*3600+now.minute*60+now.second+now.milliseconds/1000;
}

var clockSeconds = readSystemClock();
var clockSyncElapsed = 0;

// 公历、星期和农历只每 5 秒读取一次，绘制时直接使用缓存文本。
var calendarDateText,calendarLunarText;
var updateCalendarText = function(){
    var lunar = time.lunar();
    calendarDateText = tostring(lunar,"%Y/%m/%d %a");
    calendarLunarText = tostring(lunar,"%Lm %Ld");
}
updateCalendarText();

winform.clock.onDrawForeground = function(graphics,rc){
    var dpiX,dpiY = owner.dpiScale(1,1);
    var dpi = math.min(dpiX,dpiY);
    ensureHandResources(dpiX,dpiY);

    var layout = clockLayout(rc.width,rc.height,dpi);
    var angles = clockAngles(clockSeconds);

    // 日期放在表盘中下部，先画日期，再由指针自然覆盖。
    graphics.textRenderingHint = 4/*_TextRenderingHintAntiAlias*/;
    var calendarBoxW = layout.faceRadius*1.25;
    var calendarBoxH = 13*dpi;
    var calendarDateY = layout.centerY+layout.faceRadius*0.33;
    var calendarLunarY = calendarDateY+15*dpi;
    graphics.drawString(calendarDateText,calendarFont,
        ::RECTF(layout.centerX-calendarBoxW/2,calendarDateY-calendarBoxH/2,calendarBoxW,calendarBoxH),
        calendarFormat,calendarDateBrush
    );
    graphics.drawString(calendarLunarText,calendarFont,
        ::RECTF(layout.centerX-calendarBoxW/2,calendarLunarY-calendarBoxH/2,calendarBoxW,calendarBoxH),
        calendarFormat,calendarLunarBrush
    );

    fillTaperedHand(graphics,hourHandBrush,layout.centerX,layout.centerY,
        angles.hour,layout.hourLen,layout.hourHalfW,layout.handTail);
    fillTaperedHand(graphics,minuteHandBrush,layout.centerX,layout.centerY,
        angles.minute,layout.minuteLen,layout.minuteHalfW,layout.handTail);

    var secondTipX = layout.centerX+layout.secondLen*math.cos(angles.second);
    var secondTipY = layout.centerY+layout.secondLen*math.sin(angles.second);
    var secondTailX = layout.centerX-layout.secondTail*math.cos(angles.second);
    var secondTailY = layout.centerY-layout.secondTail*math.sin(angles.second);
    graphics.drawLine(secondHandPen,secondTailX,secondTailY,secondTipX,secondTipY);
    graphics.fillCircle(centerPinBrush,secondTailX,secondTailY,layout.weightR);

    graphics.fillCircle(centerOuterBrush,layout.centerX,layout.centerY,layout.hubOuter);
    graphics.fillCircle(centerAccentBrush,layout.centerX,layout.centerY,layout.hubAccent);
    graphics.fillCircle(centerPinBrush,layout.centerX,layout.centerY,layout.hubPin);
}

/*
onAnimation 返回后画布自动重绘。clockSeconds 按实际 deltaMs 连续推进，
每 5 秒重新读取系统时间，避免长期累计误差并响应系统校时。
*/
winform.clock.onAnimation = function(prevState,beginning,change,timestamp,duration,deltaMs){
    if(deltaMs>0){
        clockSeconds = (clockSeconds+deltaMs/1000)%43200;
        clockSyncElapsed += deltaMs;

        if(clockSyncElapsed>=5000){
            clockSeconds = readSystemClock();
            clockSyncElapsed = 0;
            updateCalendarText();
        }
    }

    // 仅全等于 null（或无返回值）才停止动画。
    return true;
}

// 画布转换为透明分层窗口，悬浮在原位置并跟随父窗体移动。
winform.clock.orphanWindow(true);

// 父窗体转为完全透明的分层窗口，只负责定位与拖动。
import win.ui.layered;
win.ui.layered(winform);

// 允许从表盘上拖动整个时钟。
winform.clock.onMouseDown = function(wParam,lParam){
    winform.hitCaption();
}

// 右键菜单。
import win.ui.menu;
winform.clock.onContextMenu = function(x,y){
    var menu = win.ui.popmenu(winform);
    menu.add("退出",function(){
        winform.close();
    });
    menu.popup();
}

winform.onDestroy = function(){
    releaseHandResources();
    if(faceLayer) faceLayer.delete();
}

winform.show();

// 约 30 FPS（canvas 按显示器刷新周期的整数倍降频）。刷新频率只影响平滑度，走时由 deltaMs 决定。
winform.clock.startAnimation(33);

win.loopMessage();