jointjs使用总结
由于项目需要接触了jointjs，不得不说这玩意儿很强大，但是全英文的文档也让人很头疼，下面就阐述一下我对于jointjs的粗浅认识吧。
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" /> <title>Title
title> <link rel="stylesheet" type="text/css" href="css/joint.css"> <script src="js/lib/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8">
script> <script src="js/lib/lodash.js">
script> <script src="js/lib/backbone-min.js">
script> <script src="js/lib/joint.min.js">
script> <style> #wrapper { margin: 10px auto; background: #fafafa; }
style>
head> <body>
<div id="wrapper">
div>
body>
html> 定义画板和画布
var graph = new joint.dia.Graph; //生成画板 var paper = new joint.dia.Paper({ //生成画布 el: $('#wrapper'), width: 800, height: 500, model: graph, gridSize: 1 });接下来画一个简单的矩形
var cell = new joint.shapes.basic.Rect({ position: { x: 100, y: 100 }, size: { width: 100, height: 100 }, attrs: { //边框，填充，边框宽度，样式 rect: { fill: 'pink', 'stroke': 'black', 'stroke-width': 2, 'stroke-dasharray': 0 }, text: { //字体内容，颜色，粗细，大小 text: '矩形', fill: 'black', 'font-weight': 'normal', 'font-size': 20 } } }); //把矩形放到画板中 graph.addCells([cell]);cell.position(20, 20); console.log(cell.get('position')); //{x: 20, y: 20}改变大小
cell.size(50, 50); console.log(cell.get('size')); //{width: 50, height: 50}改变文本
cell.attr('text/text', '啦啦啦'); cell.attr('text/fill', 'white'); cell.attr('text/font-weight', 'bold'); cell.attr('text/font-size', 14); 改变图形
cell.attr('rect/fill', '#234'); cell.attr('rect/stroke', 'white'); cell.attr('rect/stroke-width', 3); cell.attr('rect/stroke-dasharray', '2,5');cell.translate(10, 10)拉伸
cell.resize(120, 120)旋转
cell.rotate(45)改变z-index
cell.toFront() cell.toBack()组合图形
cell.embed(cell1) //当移动cell时，cell1也会跟着移动 cell.unembed(cell1)复制图形
cell.clone()删除图形
cell.remove()改变画布背景
paper.drawBackground({ color: color });改变画布大小
paper.setDimensions(width, height);版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/211129.html原文链接：https://javaforall.net
