AntV X6制作画板工具（图形，线段，图片上传）

前后端配合问题总结：
1.使用upload上传组件时，需要在接口调用成功之后的函数中进行图片展示，action调用接口，formatter配合拿取后端接口返回的图片数据
2.upload内部只可包含一个标签元素否则会失效
3.保存画布元素之后，可能会出现img的url丢失的情况，请提前做好存值准备
4.使用input进行图片文件上传，需要将文件进行base64格式转换之后才可以在页面上成功展示（使用upload组件可忽略此条）

以下实例仅提供本地图片上传展示功能

一.用antv X6准备画布容器

(1). 官网antv x6

$ npm install @antv/x6 --save //下载使用x6

注明：详细使用请参考官方文档，此篇文章只对需要使用部分进行简单说明
(2).以react框架进行构造
实现思路

先准备一个container容器
准备数据(X6 支持 JSON 格式数据，该对象中需要有节点 nodes 和边 edges 字段，分别用数组表示)
渲染画布

//画布准备const graph = new Graph({container: document.getElementById('container'),width: 900,height: 900,background: {color: '#fffbe6', // 设置画布背景颜色},})

二.在画布上进行节点渲染

//节点渲染，完整代码import { Graph, Shape, Addon } from '@antv/x6';
import React from 'react';
import '@antv/x6-react-shape'export default class PicturesWall extends React.Component {constructor(props) {super(props)this.state = {};this.graph=null}componentDidMount(){this.initGraph();}initContainer(container){this.container = container || {}}initGraph() {//创建画布const graph = new Graph({container: document.getElementById('container'),width: 900,height: 900,background: {color: '#fffbe6', // 设置画布背景颜色},})Graph.registerNode('image',{width: 240,height: 40,inherit: 'react-shape',preserveAspectRatio: true,component: <img />,attrs: {body: {fill: 'none',stroke: 'none',},},},true, );  this.graph = graph}addSquare=()=>{this.graph.addNode({shape: 'rect',x: 40,y: 40,width: 50,height: 50,attrs:{body: {fill: 'transparent',stroke: '#aaaa',},}//attrs是用来对节点定义样式的})}addLine=()=>{this.graph.addEdge({source: { x: 100, y: 40 },target: { x: 400, y: 40 },attrs: {line: {stroke: "#7c68fc", // 指定 path 元素的填充色},},})}handleChange = (event) => {let imgfile = event.currentTarget.files[0];///获得input的第一个图片let _this = this//使用readAsDataURL来进行回显图片let reader = new FileReader();reader.readAsDataURL(imgfile);reader.onload = function (event) {//会触发一个load事件let imgs = this.resultconsole.log('回显的Base64图片文件',imgs)_this.graph.addNode({shape: 'image',x: 40,y: 40,width: 50,height: 50,component:  <img src={imgs} style={{ width: '40px', height: '40px' }} />})};}render() {const { previewVisible, previewImage, fileList } = this.state;return (<div className="clearfix">{/* <div id="container-wrap"ref={this.initContainer}/> */}<div style={{display:'flex'}}><div style={{width: '50px', height:'20px',background:'#aaa', cursor:'pointer'}}onClick={this.addSquare}>正方形</div><div style={{width: '35px', height:'20px',background:'#aaa', cursor:'pointer',marginLeft:'5px'}}onClick={this.addLine}>线段</div><div style={{width: '70px', height:'20px',background:'#aaa', cursor:'pointer',marginLeft:'5px'}}><label class="control-label file" style={{position:'relative' ,width:'70px'}}><input  type='file' accept='image/png' onChange={this.handleChange} style={{ position: 'absolute',fontSize: '18px',right: 0,top: 0,opacity: 0,width:'100%'}}/>点击上传</label></div></div><div id='container'></div></div>);}
}

结果展示

AntV X6制作画板工具（图形，线段，图片上传）相关推荐

vue点击图片后复制图片url_简单漂亮的（图床工具）开源图片上传工具——PicGo...
介绍 PicGo: 一个用于快速上传图片并获取图片URL链接的工具,由vue-cli-electron-builder构建的简单漂亮的图片上传工具!基于electron-vue开发,支持macOS,W ...
php 上传文件工具类,PHP 图片上传工具类（支持多文件上传）
//ImageUploadTool.class.php class ImageUploadTool{ private $file; //文件信息 private $fileList; //文件列表 p ...
JAVA工具类(13)---图片上传工具类
package com.gcloud.common;import javax.imageio.ImageIO; import java.awt.image.BufferedImage; import ...
Java 常用工具类(9) : 图片上传至阿里云OSS
阿里云OSS工具类加强版 : https://blog.csdn.net/Lxinccode/article/details/79698259 import java.io.ByteArrayInp ...
【工具】vue 图片上传(单张/多张)
本文单传组件取自若依微服务为版ruoyi-ui:http://doc.ruoyi.vip/ruoyi-cloud/ 环境: vue@2.6.12 element-ui@2.15.3 1.图片上传(单张 ...
阿里OSS对象存储，实现图片上传代码；
一.注册阿里云账号,购买OSS服务获取 : 连接区域地址endpoint :需要存储的bucketName:图片保存路径picLocation :连接keyId:accessKeyId :连接秘钥a ...
前后端分离之图片上传服务端处理方法
最近公司做的项目基本上都是用的前后端分离的架构进行的.在图片上传这块处理是先将图片上传到开发者服务器上,然后返回该图片在服务器上的图片地址存到数据库中.存到数据库的时候存的并不是网络地址,而是图片的相 ...
spring框架的图片上传
使用MultipartFile实现图片上传 MultipartFile为org.springframework.web.mutipart包下的一个类是spring框架为我们提供的, 我们就使用它来完成 ...
JS画板图片上传到服务器Python
上次实验了图片上传方式把客户端图片保存到服务器的方法这次经过实验实现了画板图片直接上传到服务器并保存的方法只要验证了几个概念 js端:base64传送,json传送,XMLHttpRequest, ...

AntV X6制作画板工具（图形，线段，图片上传）

一.用antv X6准备画布容器

二.在画布上进行节点渲染

AntV X6制作画板工具（图形，线段，图片上传）相关推荐

最新文章

热门文章