文章目录

一、设置背景二、设置网格1. 网格背景2. 网格尺寸 三、缩放1. 获取当前缩放数据2. 设置缩放1. x轴，y轴一起设置2. x轴，y轴分开设置3. x轴，y轴分开设置 + 移位 四、移位1. x轴移位2. x轴，y轴移位3. 获取当前移位数值

---

一、设置背景

为JointJs的Paper设置背景色（透明色）

二、设置网格

https://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Paper.prototype.options.drawGrid

1. 网格背景

在构造Paper的时候，设置drawGrid:true就可以出现点状网格背景，如果看不清，可以把gridSize设大一些。 网格背景可以使你移动元素的时候，以网格单元为长度单位移动。

var paper = new joint.dia.Paper({ el: document.getElementById('myholder'), model: graph, width: 600, height: 100, gridSize: 10, drawGrid: true, background: { color: 'rgba(0, 255, 0, 0.3)' } });

当然，还有另外几种网格样式可以选择：

网格：drawGrid: 'mesh' 固定点阵：drawGrid:'fixedDot' fixedDot和dot的区别在1倍缩放（默认）的情况下是没有区别的，在有缩放的情况下，fixedDot会固定点的大小，而dot会跟着一起缩放。

双网格：drawGrid:'doubleMesh' 放大之后的默认效果： 当然你也可以去设置两个网格为不同的颜色的宽度：

drawGrid:{ name:'doubleMesh', args: [ { color: 'red', thickness: 1 }, // settings for the primary mesh { color: 'green', scaleFactor: 5, thickness: 5 } //settings for the secondary mesh ] },

红配绿，显得十分和谐：

2. 网格尺寸

paper.setGridSize(gridSize) 或者直接在初始化的时候设置：

var paper = new joint.dia.Paper({ el: document.getElementById('holder'), model: graph, height: 600, width: 900, drawGrid: 'FixedDot', //网格尺寸 gridSize: 10, clickThreshold: 2, magnetThreshold: 4 });

fixedDot受gridSize属性的影响，不受Paper缩放的影响

三、缩放

https://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Paper.prototype.scale

1. 获取当前缩放数据

paper.scale() // returns e.g. { sx: 2, sy: 2 }

返回对象： { sx:2, sy:3 }

2. 设置缩放

1. x轴，y轴一起设置

paper.scale(2) // scale 2x (uniformly)`

2. x轴，y轴分开设置

paper.scale(2,3) // scale 2x in `x` axis 3x in `y` axis (non-uniformly)

3. x轴，y轴分开设置 + 移位

paper.scale(2,2,100,100) // scale with the origin of the transformation at point `x=100` and `y=100`

四、移位

https://resources.jointjs.com/docs/jointjs/v2.2/joint.html#dia.Paper.prototype.translate paper.translate(x, y)

1. x轴移位

paper.translate(100, 0)

或

paper.translate(100)

2. x轴，y轴移位

paper.translate(100, 200) // set origin to `x=100` and `y=200`

3. 获取当前移位数值

paper.translate() // returns e.g. { tx: 100, ty: 100 }

返回对象： { tx:100, ty:100 }