DDei在线设计器-标尺控制

最新推荐文章于 2024-09-14 22:18:26 发布

hoslay757

最新推荐文章于 2024-09-14 22:18:26 发布

阅读量498

点赞数 11

分类专栏： DDei 文章标签：前端 javascript typescript uml 流程图 vue 开源软件

本文链接：https://blog.csdn.net/hoslay1/article/details/139447033

版权

DDei 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

标尺

本示例演示了通过参数配置设置标尺，包括开启/关闭以及尺寸。

如需了解详细的API教程以及参数说明，请参考DDei文档

一、开启/关闭

开启标尺后，在画布的左边、上边会显示标尺以及刻度表，在全局缩放时刻度表会随之变化。
操作图形时会根据标尺的单位显示图形的位置或尺寸。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";

const options = {
  config: { 
    "grid": 0, //网格线 // [!code --]
    "background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]
    ruler:false, //关闭标尺（默认开启） // [!code ++]
    initData: {
      controls: [
        {
          model: "102010",
          text: "初始化图形",
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
      'bottom': [],
      'left': [],
      'right': []
    }),
  ],
}
</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">// [!code --]
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>// [!code --]
</template>

实时效果
在这里插入图片描述

二、尺寸

开启标尺后，在画布的左边、上边会显示标尺以及刻度表，通过设置尺寸可以调整刻度表的大小。
操作图形时会根据标尺的单位显示图形的位置或尺寸。

demo.vue

<script setup lang="ts">
import DDeiEditorView from "ddei-editor";
import { DDeiCoreStandLayout } from "ddei-editor";

const options = {
  config: { 
    "grid": 0, //网格线 // [!code --]
    "background": { color: "blue", opacity: 0.1 }, //背景色 // [!code --]
    ruler:{display:true, unit:'cm'}, //设置刻度表，单位为mm、cm、in、px等（默认为mm） // [!code ++]
    initData: {
      controls: [
        {
          model: "102010",
          text: "初始化图形",
        }
      ]
    }
  },
  //配置扩展插件
  extensions: [
    //布局的配置
    DDeiCoreStandLayout.configuration({
      //配置插件
      'top': [],
      'middle': ['ddei-core-panel-canvasview', 'ddei-core-panel-quickcolorview'],
      'bottom': [],
      'left': [],
      'right': []
    }),
  ],
}
</script>

<template>
  <div style="width:400px;height:400px;margin:100px auto;">// [!code --]
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>// [!code --]
</template>

实时效果
单位为厘米