editorpro

项目安装

npm install

开启本地服务

npm run serve

项目打包命令

npm run build

Vue环境安装

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(); // 初始化设计器

Options

初始化插件可以允许你传入一些选项值来自定义设计器的功能。

id

• Type: String * 必传项

previewBox

• Type: String * 必传项

selectedInfo

• Type: Object 该对象下必须包含一个info 对象用来接受设计器内当前选中对象的属性
• Return: 返回当前选中对象的以下属性 {width, height, zIndex, type, left, right}

maxItemNum

• Type: Number' 编辑器内包含图片和色块的最大数量，默认为6

Methods

init()

在页面生成设计器

const editor = new IYWDesigner(options);
editor.init()

addImage(imageInfo)

添加图案到设计器

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 （必传项）

delElement()

删除当前选中的对象

editor.delElement()

setTemp(sampleInfo)

设置样版

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 该刀片图贴图区域的坐标点

toolKit(key)

设计器操作工具集合函数，接受一个参数

editor.toolKit('layerUp');

key值对照表

• layerUp: 上一层
• layerDown: 下一层
• centerW: 水平居中
• centerH: 垂直居中
• mirrorX: 水平镜像
• mirrorY: 垂直镜像
• maxWidth: 宽度撑满
• maxHeight: 高度撑满
• fullCover: 铺满画布
• clip: 对图像进行裁剪
• zoomIn: 等比放大

clip(cropper,shape)

对图像进行形状裁剪

import Cropper from 'cropperjs';
this.editorObj.useCropper(Cropper,'circle');

• cropper : Object 裁剪的cropper插件对象
• shape : String 裁剪形状接受 square 和 circle

setColor(color)

接受一个颜色值，改变当前色块的颜色

let color = 'red';
editorObj.setColor(color);

blade.set(Number)

设置刀片的索引，可返回editor对象，可以在点击样板前先设置当前刀片的索引之后再设置样板,默认值为0

editorObj.blade.set(1).setTemp(sampleInfo);

• Number : Number 刀片下标

blade.get()

返回当前刀片的索引

editorObj.blade.get();

• return : Number 刀片下标

getPreviewDom()

获取预览区的DOM，用于查看大图渲染

editorObj.getPreviewDom();

• return : String html dom