纸张

  本示例演示了通过参数配置纸张，包括纸张规格、方向和自定义尺寸。

  本示例基于教程快速指南开发，如果您不清楚怎样引入DDei设计器，请查看教程快速指南。

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

一、纸张规格

demo.vue

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

const options = {
  config: { 
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    paper:"A6",  //设置纸张规格，如：A4、A5、B4、B5等
    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;">
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果

二、纸张方向

demo.vue

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

const options = {
  config: { 
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    paper: {type:"A6", direct:1},  //设置纸张规格,纸张方向1纵向，2横向
    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;">
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果

三、自定义尺寸

demo.vue

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

const options = {
  config: { 
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    paper: {type:"自定义", width:10, height:10, unit:"cm"},  //自定义纸张大小
    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;">
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果

四、无纸张

demo.vue

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

const options = {
  config: { 
    "grid": 0, //网格线
    "background": { color: "blue", opacity: 0.1 }, //背景色
    paper: "无",  //清除纸张
    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;">
    <DDeiEditorView :options="options" id="ddei_editor_1"></DDeiEditorView>
  </div>
</template>

实时效果

技术支持