• svg 学习心得二 时钟的画法


    一。设计思路
    1.首先画一个时钟的底盘
    • 显示最外层的圆
    •  然后是内层的圆环
    • 再是分钟刻度的点 这个点的实现是通过svg的stroke-dasharray属性实现的
    2.接下来是时针,分针,秒针
       1.这时候你可以用直线,也可以用折线,他们都需要一个起点,一个终点,你可以把整个圆的圆心作为这些针的起点或终点,不过最好要统一。在这里我将圆心作为了终点
       2.时针点的计算
             时针上的起点,其实也是一个内层圆上的点,这样说的话可能就比较好理解了
             时针起始位置的计算
                 在这里我是从浏览器当前时间开始的,通过当前时间计算你现在的小时,以及在整个圆盘360 度中所占的角度
                  注意 svg 中的圆的起点是从 右侧中间部分开始的
    如下:
                  
    var myDate = new Date();
    var hours = myDate.getHours();
    //获取初始角度
    hours = hours > 12 ? hours - 12 : hours;
    _init_prickerAngle_hours = hours * 30 + ((minutes / 60) * 30) - 90;
    再由此计算他在这个内层圆上的坐标及时针的起始坐标
     
    x1 = orgin.x + r * Math.cos(angle * Math.PI / 180);
    y1 = orgin.y + r * Math.sin(angle * Math.PI / 180);
     
    其中r 是内层圆的半径
     
    分针与秒针的实现与此原理相同
    3.然后是 3 条线交汇处的圆环及秒针上的圆环
    交汇处的圆环与秒针上的一致
    是用3个圆环交叠而成
    用时重新设置圆点坐标即可
     
    <g class="a2">
        <circle r="6" stroke="none" stroke-width="1" fill="#ab434c"/>
        <circle r="4" stroke="none" stroke-width="1" fill="#cc6474"/>
        <circle r="2" stroke="none" stroke-width="1" fill="#5d857a"/>
    </g>
     
    二。用到的知识
    strokedasharray属性用于创建虚线:
    如:
    stroke-dasharray="5,5"
    stroke-dasharray="10,10"
    stroke-dasharray="20,10,5,5,5,10"
    上边三条线的实现
    效果图:
  • 相关阅读:
    黑马程序员——指针的应用
    黑马程序员——C语言基础常量、运算符、函数
    黑马程序员——数组
    黑马程序员——循环结构for,while,do..while
    webView去掉右侧导航条
    使用Eclipse构建Maven的SpringMVC项目
    win7 自动登录
    eclipse 自动提示
    apache+php+mysql 环境配置
    KMP子串查找算法
  • 原文地址:https://www.cnblogs.com/zjy1017/p/6715178.html
Copyright © 2020-2023  润新知