说明
本示例演示了通过参数配置纸张,包括纸张规格、方向和自定义尺寸。
如需了解详细的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 --]
paper:"A6", //设置纸张规格,如:A4、A5、B4、B5等 // [!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 --]
paper: {type:"A6", direct:1}, //设置纸张规格,纸张方向1纵向,2横向 // [!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 --]
paper: {type:"自定义", width:10, height:10, unit:"cm"}, //自定义纸张大小 // [!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 --]
paper: "无", //清除纸张 // [!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>
实时效果
仓库信息
源码: https://gitee.com/hoslay/ddei-editor
在线体验: https://www.ddei.top