太极八卦罗盘JS绘制

原创 已于 2025-06-29 13:40:01 修改 · 255 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript

于 2025-06-29 13:37:19 首次发布

LeaferJS 是一款好用的 Canvas 引擎,通过LeaferJS绘制罗盘案例.
https://www.leaferjs.com/ui/guide/

示例

太极八卦罗盘

直接上代码


<template>
  <div id="LuoPan"></div>
  <div id="info">
    <p>屏幕宽度: {{ screenWidth }}px</p>
    <p>屏幕高度: {{ screenHeight }}px</p>
    <p>圆心x: {{ centerX }}px</p>
    <p>圆心Y: {{ centerY }}px</p>
    <p>太极半径: {{ tjRadius }}px</p>
    <p>罗盘环宽度: {{ loopWidth }}px</p>
    <p>太极旋转速度: {{ tj_v }}</p>
    <p>先天八卦旋转速度: {{ xtbg_v }}</p>
  </div>
</template>
<script>
import {Leafer, Rect, Ellipse, Group,Text} from 'leafer-ui'
import '@leafer-in/state'
  import { Animate } from '@leafer-in/animate'
  export default {
    name: 'LuoPan',
    data(){
      return {
        screenWidth: 0,// 屏幕宽度
        screenHeight: 0, //屏幕高度
        centerX: 0, //圆心x
        centerY: 0, //圆心Y
        tjRadius: 100, //太极半径
        loopWidth: 50, // 罗盘环宽度
        tj_v: 5, // 太极旋转速度
        xtbg_v: 10, // 先天八卦旋转速度
        htbg_v: 20, // 后天八卦旋转速度
        loopData:{
          xtbg:[
            {code: "011",txt: "巽"},{code: "010",txt: "坎"},{code: "001",txt: "艮"}, {code: "000",txt: "坤"},
            {code: "100",txt: "震"},{code: "101",txt: "离"},{code: "110",txt: "兑"},{code: "111",txt: "乾"},
          ],
          htbg:[
            {code: "000",txt: "坤"},{code: "110",txt: "兑"},{code: "111",txt: "乾"},{code: "010",txt: "坎"},
            {code: "001",txt: "艮"},{code: "100",txt: "震"},{code: "011",txt: "巽"},{code: "101",txt: "离"},

          ],
        }
      };
    },
    mounted() {
      this.updateScreenSize();
      const leafer = new Leafer({
        view: 'LuoPan', // view 参数支持设置 canvas 标签对象
        width: 0, // 不能设置为 0， 否则会变成自动布局
        height: 800,
        fill: 'rgba(255,223,0,1)'
      })
      // 绘制太极
      const groudTaiji  = this.drewTaiji(leafer);
      // 绘制先天八卦
      const groudXtbagua = this.drewLoopXtbg(leafer,8, this.loopData.xtbg,1);
      // 绘制先天八卦
      const groudHtbagua = this.drewLoopHtbg(leafer,8, this.loopData.htbg,2);


    },
    methods: {
      // 获取屏幕长宽
      updateScreenSize() {
        this.screenWidth = window.innerWidth;
        this.screenHeight = window.innerHeight;
        this.centerX = this.screenWidth / 2 - this.tjRadius-200;
        this.centerY = this.screenHeight / 2 - this.tjRadius;
      },
      drewLoopHtbg(leafer,num, htbg,level) {
        const groundHtbg = new Group({
          x: this.centerX+this.tjRadius,
          y: this.centerY+this.tjRadius,
          around: 'center',
          animation:{
            keyframes: [
              {
                x: this.centerX+this.tjRadius,
                y: this.centerY+this.tjRadius,
                rotation: 360,
                cornerRadius: 0
              }
            ],
            easing: 'linear',
            duration: this.htbg_v, // 自动分配剩余的时长给未设置 duration 的关键帧： (3 - 0.5 - 0.2 - 0.1) / 2
            loop: true
          },
        });

        // 画框
        for (let i = 0; i < num; i++) {

          const itemAngle = 360/num;
          const item = Ellipse.one({
            fill: 'rgb(255,146,0,0.2)',
            draggable: false,
            x: this.centerX + this.tjRadius,
            y: this.centerY + this.tjRadius,
            width: this.tjRadius * 2 + this.loopWidth*2*2,
            height: this.tjRadius * 2 + this.loopWidth*2*2,
            startAngle: i*itemAngle,
            endAngle: (i+1)*itemAngle,
            innerRadius: (this.tjRadius+this.loopWidth)/(this.loopWidth*2+this.tjRadius),
            hoverStyle: { // // 鼠标悬停 样式
              fill: 'rgba(255,255,255, 0.8)',
              shadow: {
                x: 0,
                y: 0,
                blur: 30,
                color: 'rgba(255,255,255,0.97)',
                box: true // box-shadow
              }
            }
          });

          // 画爻
          var htbgItem = htbg[i];
          var htbgItemCode = htbgItem['code'];
          var htbgItemTxt = htbgItem['txt'];

          for (let j = 0; j < 3; j++) {
            var arry = htbgItemCode.split("");
            var arryElement = arry[j];
            const tempRadius = this.tjRadius - j*this.loopWidth/5 - this.loopWidth/3 + this.loopWidth*(level-1);

            if(arryElement == '1'){
              const yaoYang = Rect.one({
                zIndex: 10,
                fill: '#fff',
                draggable: false,
                y: this.loopWidth*(level-1) + this.centerY + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                x: this.loopWidth*(level-1) + this.centerX + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                width: this.loopWidth/3*2,
                height: this.loopWidth / 9,
                rotation: i * itemAngle + 118,
                around: 'center',
              });
              groundHtbg.add(yaoYang);
            }else{
              const yaoYangOne = Rect.one({
                zIndex: 10,
                fill: '#fff',
                draggable: false,
                x: this.loopWidth*(level-1) + this.centerX + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                y: this.loopWidth*(level-1) + this.centerY + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                offsetX: (-this.loopWidth/3*2/5*2+4) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                offsetY: (this.loopWidth/3*2/5*2-5) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                width: this.loopWidth/3*2/5*2,
                height: this.loopWidth / 9,
                rotation: i * itemAngle + 117,
                around: 'center',

              });
              groundHtbg.add(yaoYangOne);

              const yaoYangTwo = Rect.one({
                zIndex:  10,
                fill: '#fff',
                draggable: false,
                y: this.loopWidth*(level-1) + this.centerY + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                x: this.loopWidth*(level-1) + this.centerX + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                offsetX: (this.loopWidth/3*2/3/5*2 + 5) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                offsetY: (- this.loopWidth/3*2/5*2 + 4) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                width: this.loopWidth/3*2/5*2,
                height: this.loopWidth / 9,
                rotation: i * itemAngle + 117,
                around: 'center',

              });
              groundHtbg.add(yaoYangTwo);
            }
          }
          groundHtbg.add(item);
          const tempRadius = this.tjRadius - this.loopWidth/9*6-4 + this.loopWidth;
          const text = new Text({
            fill: '#000',
            text: "     "+htbg[i].txt,
            draggable: false,
            x: this.loopWidth + this.centerX + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 4)),
            y: this.loopWidth + this.centerY + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 4)),
            fontSize: 16,
            rotation: i * itemAngle + 290,
          });
          groundHtbg.add(text);
        }


        leafer.add(groundHtbg);
        return groundHtbg;
      },
      drewLoopXtbg(leafer,num, xtbg, level) {
        const groundXtbg = new Group({
          x: this.centerX+this.tjRadius,
          y: this.centerY+this.tjRadius,
          around: 'center',
          animation:{
            keyframes: [
              {
                x: this.centerX+this.tjRadius,
                y: this.centerY+this.tjRadius,
                rotation: 360,
                cornerRadius: 0
              }
            ],
            easing: 'linear',
            duration: this.xtbg_v, // 自动分配剩余的时长给未设置 duration 的关键帧： (3 - 0.5 - 0.2 - 0.1) / 2
            loop: true
          },
        });

        // 画框
        for (let i = 0; i < num; i++) {

          const itemAngle = 360/num;
          const item = Ellipse.one({
            zIndex: 10,
            fill: 'rgba(255,255,255,0.2)',
            draggable: false,
            x: this.centerX + this.tjRadius,
            y: this.centerY + this.tjRadius,
            width: this.tjRadius * 2 + this.loopWidth*2,
            height: this.tjRadius * 2 + this.loopWidth*2,
            startAngle: i*itemAngle,
            endAngle: (i+1)*itemAngle,
            innerRadius: this.tjRadius/(this.loopWidth+this.tjRadius),
            hoverStyle: { // // 鼠标悬停 样式
              fill: 'rgba(255,255,255, 0.8)',
              shadow: {
                x: 0,
                y: 0,
                blur: 30,
                color: 'rgba(255,255,255,0.97)',
                box: true // box-shadow
              }
            }
          });

          // 画爻
          var xtbgItem = xtbg[i];
          var xtbgItemCode = xtbgItem['code'];
          var xtbgItemTxt = xtbgItem['txt'];

          for (let j = 0; j < 3; j++) {
            var arry = xtbgItemCode.split("");
            var arryElement = arry[j];
            const tempRadius = this.tjRadius - j*this.loopWidth/5 - this.loopWidth/3 + this.loopWidth*(level-1);

            if(arryElement == '1'){
              const yaoYang = Rect.one({
                zIndex: 10,
                fill: '#fff',
                draggable: false,
                x: this.centerX + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                y: this.centerY + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                width: this.loopWidth/3*2,
                height: this.loopWidth / 9,
                rotation: i * itemAngle + 118,
                around: 'center',

              });
              groundXtbg.add(yaoYang);
            }else{
              const yaoYangOne = Rect.one({
                zIndex: 10,
                fill: '#fff',
                draggable: false,
                x: this.loopWidth*(level-1) + this.centerX + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                y: this.loopWidth*(level-1) + this.centerY + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                offsetX: (-this.loopWidth/3*2/5*2+4) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                offsetY: (this.loopWidth/3*2/5*2-5) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                width: this.loopWidth/3*2/5*2,
                height: this.loopWidth / 9,
                rotation: i * itemAngle + 117,
                around: 'center',

              });
              groundXtbg.add(yaoYangOne);

              const yaoYangTwo = Rect.one({
                fill: '#fff',
                draggable: false,
                y: this.loopWidth*(level-1) + this.centerY + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                x: this.loopWidth*(level-1) + this.centerX + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                offsetX: (this.loopWidth/3*2/3/5*2 + 5) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                offsetY: (- this.loopWidth/3*2/5*2 + 4) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 3)),
                width: this.loopWidth/3*2/5*2,
                height: this.loopWidth / 9,
                rotation: i * itemAngle + 117,
                around: 'center',

              });
              groundXtbg.add(yaoYangTwo);
            }
          }
          groundXtbg.add(item);
          const tempRadius = this.tjRadius - this.loopWidth/9*6-4 + this.loopWidth*(level-1);
          const text = new Text({
            fill: '#000',
            text: "     "+xtbg[i].txt,
            draggable: false,
            x: this.loopWidth*(level-1) + this.centerX + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.cos(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 4)),
            y: this.loopWidth*(level-1) + this.centerY + this.tjRadius * 3 - this.tjRadius / 2 + (this.loopWidth + tempRadius) * Math.sin(Math.PI / 180 * (itemAngle * i + itemAngle / 2 + 4)),
            fontSize: 16,
            rotation: i * itemAngle + 290,
          });
          groundXtbg.add(text);
        }


        leafer.add(groundXtbg);
        return groundXtbg;
      },
      // 画太极
      drewTaiji(leafer){
        const groundTaiji = new Group({
          x: this.centerX+this.tjRadius,
          y: this.centerY+this.tjRadius,
          around: 'center',
          animation:{
            keyframes: [
              {
                x: this.centerX+this.tjRadius,
                y: this.centerY+this.tjRadius,
                rotation: 360,
                cornerRadius: 0
              }
            ],
            easing: 'linear',
            duration: this.tj_v, // 自动分配剩余的时长给未设置 duration 的关键帧： (3 - 0.5 - 0.2 - 0.1) / 2
            loop: true
          }
        });

        //太极大扇形-右边黑
        const tjBai = Ellipse.one({
          fill: '#000',
          draggable: false,
          x: this.centerX+this.tjRadius,
          y: this.centerY+this.tjRadius,
          width: this.tjRadius*2,
          height: this.tjRadius*2,
          startAngle: -90,
          endAngle: 90,
          shadow: {
            x: 0,
            y: 0,
            blur: 20,
            color: 'rgba(255,255,255,0.97)',
            box: true // box-shadow
          },
        });
        groundTaiji.add(tjBai);

        //太极大扇形-左边白
        const tjHei = Ellipse.one({
          fill: '#fff',
          draggable: false,
          x: this.centerX+this.tjRadius,
          y: this.centerY+this.tjRadius,
          width: this.tjRadius*2,
          height: this.tjRadius*2,
          startAngle: 90,
          endAngle: 270,
          shadow: {
            x: 0,
            y: 0,
            blur: 20,
            color: 'rgba(255,255,255,0.97)',
            box: true // box-shadow
          },
        })
        groundTaiji.add(tjHei);

        //太极中圆-白
        const tjZhongyuanBai = Rect.one({
          fill: '#fff',
          draggable: false,
          x: this.centerX+this.tjRadius*3/2,
          y: this.centerY+this.tjRadius,
          width: this.tjRadius,
          height: this.tjRadius,
          cornerRadius: this.tjRadius/2,
        });
        groundTaiji.add(tjZhongyuanBai);


        //太极中圆-黑
        const tjZhongyuanHei = Rect.one({
          fill: '#000',
          draggable: false,
          x: this.centerX+this.tjRadius*3/2,
          y: this.centerY+this.tjRadius*2,
          width: this.tjRadius,
          height: this.tjRadius,
          cornerRadius: this.tjRadius/2,
        });
        groundTaiji.add(tjZhongyuanHei);

        //太极小圆-白
        const tjXiaoyuanBai = Rect.one({
          fill: '#000',
          draggable: false,
          x: this.centerX+this.tjRadius*2 - this.tjRadius/6,
          y: this.centerY+this.tjRadius*3/2-this.tjRadius/6,
          width: this.tjRadius/6*2,
          height: this.tjRadius/6*2,
          cornerRadius: this.tjRadius/6,
        });
        groundTaiji.add(tjXiaoyuanBai);

        //太极小圆-黑
        const tjXiaoyuanHei = Rect.one({
          fill: '#fff',
          draggable: false,
          x: this.centerX+this.tjRadius*2 - this.tjRadius/6,
          y: this.centerY+this.tjRadius*2+this.tjRadius/2-this.tjRadius/6,
          width: this.tjRadius/6*2,
          height: this.tjRadius/6*2,
          cornerRadius: this.tjRadius/6,
        });
        groundTaiji.add(tjXiaoyuanHei);
        leafer.add(groundTaiji);
      }
    }
  };

</script>

<style scoped>
  #info{
    position: absolute;
    right: 100px;
    top: 10px;
    width: 200px;
    background-color: rgba(50, 205, 120, 0.5);
    color: white;
    padding-left: 10px;
  }
</style>
js实现动态罗盘时钟
∑
12-12 6305
HTML: <script src="//code.jquery.com/jquery-3.3.1.js"></script> <script> var w_resize = function(){ var w_fontsize = document.documentElement.clientWidth/750 ...
vue 简单实现转盘样式组件
z1625000762的博客
10-21 1179
vue转盘样式组件简单实现
148Echarts - 旭日图（Book Records）
阿甘兄
05-05 947
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
罗盘时钟 JavaScript实现
03-06
1.一个网页动态时钟，可图一乐
js实现一个罗盘样的时钟
woshiyaozhenyang的博客
10-28 432
扇形打开成一个圆，后一直随时间更新。
原生js实现时间罗盘
weixin_44862325的博客
04-18 428
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
太极八卦罗盘Python代码
04-26
太极八卦罗盘是一个用于预测和分析未来的工具，它基于八卦理论和易经哲学。下面是一个简单的太极八卦罗盘的Python代码示例： ```python import random def generate_gua(): gua = [] for _ in range(3): gua....
精选资源
八卦罗盘动态时钟（C实现）
09-12
此罗盘可跟随系统当前时间自动走针，并且对应有十二时辰，八卦阵显示。
精选资源
网页版乾坤八卦风水罗盘旋转CSS3动画HTML
12-13
6. **交互事件处理（Event Handling）**：使用JavaScript或jQuery，可以添加更多的交互功能，如点击罗盘某个区域触发特定动作，或者根据用户输入调整罗盘的旋转速度。 通过上述技术，这个网页版的乾坤八卦风水罗盘...
Python绘制太极八卦图：图形创意编程实例与传统文化融合应用
最新发布
01-15
内容概要：该文件详细记录了用 Python 和 Turtle 模块绘制传统中国符号太极八卦图的方法。首先定义一系列辅助函数完成绘图参数设置，如返回原点（rset）、画笔偏移(offset)，接着实现具体图案构建，分别定义太极图...
精选资源
CSS3风水罗盘旋转动画特效
06-24
这个“CSS3风水罗盘旋转动画特效”是一个利用CSS3特性和技术实现的创新视觉效果，它模拟了中国传统风水学中的乾坤八卦罗盘，通过动态旋转来吸引用户注意力并提升用户体验。 首先，我们要理解CSS3的关键帧动画（@...
JavaScript实现抖音罗盘时钟
10-16
主要为大家详细介绍了JavaScript实现抖音罗盘时钟，特别实用的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
时间罗盘（HTML+css+js）.zip
03-15
抖音网红的时间罗盘不是粗编乱造，并在css和js上进行注释方便学习 html5 时钟显示模板，直接显示当前的时间，还能按照秒自动加时，动画效果也随着时间的变化而变化。动画指向也为当前的时间，罗盘显示，贼帅罗盘时钟
html5罗盘时钟
06-12
html5 罗盘时钟 使用html5开发 需要使用支持html5的浏览器 或者手机等
js 实现多重罗盘转动
weixin_34189116的博客
11-17 1023
引子 这几天一直在忙一个可滑动的转盘的demo，网上也有类似的例子，但是根据老板的需求来改他们的代码，还不如重新写个完全符合需求的插件。想法很美好，但是新手上路... 效果链接文末 需求image 这个demo给的非常简单，能转动的地方有三处，内盘、外盘和指针，这三个上的集合的交集产生一个链接，通过中间的按钮跳转。 这个需求乍一看老简单老简单的，但是作为一个菜鸡第一次上道，堪比开碰碰车，头破血流...
【罗盘时钟---使用html,js,css编写。附源代码及效果】
web15085599741的博客
03-06 459
代码 罗盘效果.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>js罗盘时钟
基于vue3实现梅花易数（一）取卦、取爻
梅花时辰
05-23 799
梅花易数
【前端领域】一个好玩好看的罗盘时钟 --- 附详细介绍
热门推荐
好好读书
01-03 2万+
【前端领域】一个好玩好看的罗盘时钟 --- 附详细介绍
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值