npm install
npm run serve
npm run build
vue 环境安装只需要引入本Demo直接输如命令安装即可
npm i
如需裁剪功能需要引入 cropperjs
3D功能需要引入 Three.js
设计器包单独加载
npm i iywdesigner
引入用于合成的插件
<script src="https://cdn.bootcss.com/dom-to-image/2.2.0/dom-to-image.js"></script>
引入设计器插件
<link href="path/to/iywDesginer.css" rel="stylesheet">
<script src="path/to/IYWDesigner.js"></script>
1.在需要生成设计器的组件里首先要给一个父级容器,并且设置一个id
<div class="editor-box" id="editor"></div>
2.如需要预览效果则需要同上一样添加一个预览区的容器
<div class="preview-box" id="previewBox" draggable="false">
<span class="preview-tag">预览</span>
</div>
在dom完成渲染后生成设计器
this.editorObj = new IYWDesigner(
{
id:'editor',// 父级容器的ID
previewBox:'previewBox', // 预览区域的ID
selectedInfo:_this.selectedInfo, // 如果需要得到当前操作对象的信息则传
exportSize: 800 // 导出图的尺寸
},
);
this.editorObj.init(); // 初始化设计器
初始化插件可以允许你传入一些选项值来自定义设计器的功能。
- Type:
String
* 必传项
- Type:
String
* 必传项
- Type:
Object
该对象下必须包含一个info
对象用来接受设计器内当前选中对象的属性 - Return: 返回当前选中对象的以下属性
{width, height, zIndex, type, left, right}
- Type:
Number
' 编辑器内包含图片和色块的最大数量,默认为6
在页面生成设计器
const editor = new IYWDesigner(options);
editor.init()
添加图案到设计器
const imageInfo = { name: '示例图', type: 'pattern', id: 1, src:'1.png' };
editor.addImage(imageInfo)
- name:
String
图片的名称 - type:
String
图片类型 1: 授权. 2: 素材. 3: IP. 4: 本地 (如果此项没有传默认识别为本地图案) - id:
Number
图案的id - src:
String
* 图片的url (必传项)
删除当前选中的对象
editor.delElement()
设置样版
const sampleInfo = {
name: '示例样板',
id: 1,
src: "../assets/static/images/sample-1.png",
bladeInfo:[
{
points: [],
name:"blade1",
bladeImg: "https://chdesign.oss-cn-shanghai.aliyuncs.com/test/CUMS/OA/20210225/161425967385244942.png",
}
]
};
editor.setTemp(sampleInfo)
- name:
String
样版的名称 - id:
Number
样版的id - src:
String
* 样版的url (必传项) - bladeInfo:
Array
- name :
String
刀片的名称 - bladeImg:
String
刀片图地址 - points:
Array
该刀片图贴图区域的坐标点
- name :
设计器操作工具集合函数,接受一个参数
editor.toolKit('layerUp');
- layerUp: 上一层
- layerDown: 下一层
- centerW: 水平居中
- centerH: 垂直居中
- mirrorX: 水平镜像
- mirrorY: 垂直镜像
- maxWidth: 宽度撑满
- maxHeight: 高度撑满
- fullCover: 铺满画布
- clip: 对图像进行裁剪
- zoomIn: 等比放大
对图像进行形状裁剪
import Cropper from 'cropperjs';
this.editorObj.useCropper(Cropper,'circle');
- cropper :
Object
裁剪的cropper插件对象 - shape :
String
裁剪形状接受square
和circle
接受一个颜色值,改变当前色块的颜色
let color = 'red';
editorObj.setColor(color);
设置刀片的索引,可返回editor对象,可以在点击样板前先设置当前刀片的索引之后再设置样板,默认值为0
editorObj.blade.set(1).setTemp(sampleInfo);
- Number :
Number
刀片下标
返回当前刀片的索引
editorObj.blade.get();
- return :
Number
刀片下标
获取预览区的DOM,用于查看大图渲染
editorObj.getPreviewDom();
- return :
String
html dom