feng-shui-compass v2.1.1

FengShuiCompass - 自定义罗盘

自定义罗盘数据和样式，基本样式配置. 分 canvas(旧) 版本 和 svg 版本

在线演示：https://compass.zzerx.cn/

开始

概念： 层：一圈的数据为层，下标从0开始。, 宫：一层中的一格为宫，下标从0开始

安装

npm i feng-shui-compass

SVG版本的FengShuiCompassSvg.vue 组件

相比Canvas版本，SVG版本具有以下优势： 1. 更好的缩放性能，不会失真 2. 更容易实现交互效果 3. 支持多边形罗盘

基本使用

import { FengShuiCompassSvg, themes } from 'feng-shui-compass';
import 'feng-shui-compass/dist/style.css';

// 使用预设主题
const compassConfig = reactive(themes.compassTheme);

// 或自定义配置 (按照规则)
const compassConfig = reactive({
  info: { 
    id: 'custom-compass'
  },
  compassSize: { 
    width: 500, 
    height: 500 
  },
  latticeFill: [
    [0, 1, "rgba(255, 166, 0, 0.57)"],
    // [0, 1, "#FF0000"],
  ],
  scaclStyle:{
    minLineHeight: 10,
    midLineHeight: 25,
    maxLineHeight: 25,
  },
  line: {
    borderColor: "#AAAAAA",
    scaleColor: "#AAAAAA",
    scaleHighlightColor: "#AAAAAA",
  },
  isShowTianxinCross: false,
  data: [
    {
      name: "方位",
      startAngle: 0,
      fontSize: 32,
      textColor: "#ffff00",
      vertical: false,
      togetherStyle: "empty",
      data: ["北", "东北", "东", "东南", "南", "西南", "西", "西北"],
    },
    {
      name: "刻度标记",
      startAngle: 0,
      fontSize: 18,
      textColor: "#cccccc",
      vertical: true,
      togetherStyle: "empty",
      data: [],
    },
  ],
});

<template>
  <FengShuiCompassSvg
    :config="compassConfig"
    @latticeClick="handleLatticeClick"
  />
</template>

组件配置

组件使用统一的 config 对象进行配置，包含以下属性：，具体用例可参考 themes

info 配置

基础标识信息

line 配置

线条样式配置

scaclStyle 配置

刻度样式配置

animation 配置

动画效果配置

data

层配置参数

dataItem togetherStyle 可选值

dataItem shape 可选值

事件

canvas 版本 的 vue 组件 （旧）

详细可参考示例代码

<script setup>
import { FengShuiCompass, themes } from 'feng-shui-compass';
import 'feng-shui-compass/dist/style.css';

    ...
</script>
    <FengShuiCompass
      :width="2000"
      :height="2000"
      v-model:rotate="rotate"
      :compassData="themes.data"
      v-model:layerFilt="layerFilt"
      v-model:latticeFill="latticeFill"
      :scaclStyle="scaclStyle"
    ></FengShuiCompass>

此处的width，height 为canvs画布大小，非div大小

canvas 版本直接使用 CompassCanvasCreateor 绘制

import { CompassCanvasCreateor } from 'feng-shui-compass';
const { FengShuiCompass, CompassData } =  CompassCanvasCreateor;
const compassData = new CompassData().getAllData();
const fs = new FengShuiCompass();
 let canvas /* = canvas 元素 */
//获取canvas上下文
 let ctx = canvas.getContext("2d");
//链式调用显示罗盘
    //设置中心点
  fs.setCenterPoint(props.width / 2, props.height / 2)
    //设置半径
    .setRadius(props.height / 2)
    //设置宫填充色（二维数组格式[层][宫]，支持循环填充且不覆盖已有颜色）
    .setLatticeFill()
    //设置层填充色（数组格式，支持循环填充且保留原有刻度线）
    .setLayerFill([])
    //设置刻度样式
    .setScaclStyle({
      minLineHeight: 10,
      midLineHeight: 25,
      maxLineHeight: 25,
      numberFontSize: 30,
    })
    //添加罗盘数据
    .setCompassData(compassData) //必须在配置所有基本数据完成之后执行
    .draw(ctx); //draw 必须setCompassData完成之后执行 终止链式

其他

欢迎 PR / ISSUE / 交流