将 JointJS 添加到 Vue 项目中

安装需要的包

npm 方式

npm install jointjs

yarn 方式

yarn add jointjs

在 vue 中使用 jointjs

<template><div class="canvas" ref="canvas"></div>
</template><script>
import * as joint from 'jointjs'
export default {data () {return {paper: null}},mounted() {this.init()},methods: {init() {let graph = new joint.dia.Graphthis.paper = new joint.dia.Paper({el: this.$refs.canvas,model: graph,width: 600,height: 100,gridSize: 1})let rect = new joint.shapes.standard.Rectangle()rect.position(100, 30)rect.resize(100, 40)rect.attr({body: {fill: 'blue'},label: {text: 'Hello',fill: 'white'}})rect.addTo(graph)let rect2 = rect.clone()rect2.translate(300, 0)rect2.attr('label/text', 'World!')rect2.addTo(graph)let link = new joint.shapes.standard.Link()link.source(rect)link.target(rect2)link.addTo(graph)}}
}
</script><style></style>

效果图：

如果我们想给画布 paper 添加网格背景的话
先引入 css 样式

// 显示网格背景颜色需要引入样式
import 'jointjs/dist/joint.css'
...
this.paper = new joint.dia.Paper({el: this.$refs.canvas,model: graph,width: 600,height: 100,gridSize: 10, // 网格大小drawGrid: true, // 显示网格background: {color: 'rgba(0, 255, 0, 0.3)'}
})
...

JointJS与vue集成初体验相关推荐

Vue之Vue的初体验
Vue的初体验个人博客 https://www.boycharse.top Vue系列上一篇:无下一篇:02-Vue的插值操作前言这个系列的博客是按照我学习vue的顺序来写的.视频教程是b站 ...
融云im小程序集成初体验
融云im小程序集成初体验最近领导让做一个小程序端的聊天功能,基于多方考虑,最终选择了融云的im来实现,那就先写个demo体验下吧. 首先呢,当然是查看官方文档,文档地址如下: https://doc ...
vue.js 初体验— Chrome 插件开发实录
欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:陈纬杰背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见 ...
【taro +vue】初体验
安装 npm i -g taro @tarojs/cli taro init myApp创建一个新的项目编译运行 npm run dev:weapp会在根目录下打包一个dist文件,用开发者工具打开 ...
vue create()获取ref_vue-next+typescript 初体验
无意间又一次刷到了尤大介绍 Vue 3 的文章,这次决定试一下 Vue 3 的 TypeScript 支持到底如何,不管别人说什么,只有自己用的舒服才是真的舒服.Vue 2 可是因为 ts 的缘故被喷 ...
Vue快速上手笔记1 - 使用初体验
Vue快速上手笔记1 - 使用初体验博主:李俊才邮箱:291148484@163.com 若本文中存在的错误请告知博主更正希望对大家有所帮助专题目录:https://blog.csdn.net ...
sentinel接入网关应用_微服务初体验（三）：集成Gateway网关和Sentinel限流
前言最近笔者在对微服务架构进行学习,参考了各种项目的技术文章.框架文档以及视频网站,最终选择使用Nacos+Dubbo+Gateway+Sentinel来搭建一个项目练手.其中Nacos作为服务的注 ...
【ChatGPT初体验与Android的集成使用】
ChatGPT初体验与Android的集成使用前言创建自己的API KEY Android端的集成代码总结前言 ChatGPT凭借着强大的AI功能火的一塌糊涂,由于其官网在国内不能访问,很多 ...
Vue初体验（七）使用Vue实现一个简单的聊天框
1.实践是检验真理的唯一标准,现在我们做一个简易的聊天窗口,有一个input框,用于用户输入,一个按钮button,用于把用户的输入提交上去,然后又一个列表ul,用于展示我们每次提交的消息. 2.通过 ...

JointJS与vue集成初体验

将 JointJS 添加到 Vue 项目中

安装需要的包

在 vue 中使用 jointjs

JointJS与vue集成初体验相关推荐

最新文章

热门文章