canvas fabric.js api梳理
下面是canvas fabric.js的用法
锁住
lockMovementX lockMovementY lockRotation
lockScalingX lockScalingY
12
选中元素时去掉连接线
object.hasBorders = false;
1
选中元素时去掉四边的框
object.hasControls=false;
1
设置选中元素时的样子
object.set({
borderColor: 'red',
cornerColor: 'green',
cornerSize: 6
});
12345
设置元素不能被操作
Object.selectable=false ;
1
设置背景图
canvas.setBackgroundImage('img/golfball.png',canvas.renderAll.bind(canvas));
1
设置背景透明显示
canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
1
事件：
mouse:up mouse:move mouse:dowm
object:modified object:moving object:selected object:scalig object:rotating
before:selection:cleared selection:cleared
after：render
"path:created" "object:added" "object:removed"
12345
添加线
var line = new fabric.Line([10, 10, 100, 100], {
fill: 'green',
stroke: 'green'
});
canvas.add(line);
12345
添加矩形
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
canvas.add(rect);
123456789
移动到指定位置
rect.set({ left: 20, top: 50 });
canvas.renderAll();
12
设置一些属性
rect.set('fill', 'red');
rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
rect.set('angle', 15).set('flipY', true);
123
添加圆和三角形
var circle = new fabric.Circle({
radius: 20, fill: 'green', left: 100, top: 100
});
var triangle = new fabric.Triangle({
width: 20, height: 30, fill: 'blue', left: 50, top: 50
});
canvas.add(circle, triangle);
1234567
椭圆
var ellipse = new fabric.Ellipse({
rx: 45,
ry: 80,
fill: 'yellow',
stroke: 'red',
strokeWidth: 3,
angle: 30,
left: 100,
top: 100
});
canvas.add(ellipse);
1234567891011
Canvas中操作一些元素的方法
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // add object
canvas.item(0); // reference fabric.Rect added earlier (first object)
canvas.getObjects(); // get all objects on canvas (rect will be first and only)
canvas.remove(rect); // remove previously-added fabric.Rect
12345678
加载图片的方法
var canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 30,
opacity: 0.85
});
canvas.add(imgInstance);
fabric.Image.fromURL('my_image.png', function(oImg) {
canvas.add(oImg);
});
fabric.Image.fromURL('my_image.png', function(oImg) {
// scale image down, and flip it, before adding it onto canvas
oImg.scale(0.5).setFlipX(true);
canvas.add(oImg);
});
12345678910111213141516171819
通过画路径为形状
var canvas = new fabric.Canvas('c');
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');
path.set({ left: 120, top: 120 });
canvas.add(path);
1234
可以设置路径样式
path.set({ fill: 'red', stroke: 'green', opacity: 0.5 });
1
动画
rect.animate('angle', 45, {
onChange: canvas.renderAll.bind(canvas)
});
或
rect.animate('left', '+=100', { onChange: canvas.renderAll.bind(canvas) });
或
rect.animate('angle', '-=5', { onChange: canvas.renderAll.bind(canvas) });
或
rect.animate('left', 500, {
onChange: canvas.renderAll.bind(canvas),
duration: 1000,
easing: fabric.util.ease.easeOutBounce
});
12345678910111213141516171819
组合的使用
var circle = new fabric.Circle({
radius: 100,
fill: '#eef',
scaleY: 0.5,
originX: 'center',
originY: 'center'
});
var text = new fabric.Text('hello world', {
fontSize: 30,
originX: 'center',
originY: 'center'
});
var group = new fabric.Group([ circle, text ], {
left: 150,
top: 100,
angle: -10
});
canvas.add(group);
123456789101112131415161718192021
设置组合中的元素
group.item(0).setFill('red');
group.item(1).set({
text: 'trololo',
fill: 'white'
});
12345
序列化
var canvas = new fabric.Canvas('c');
JSON.stringify(canvas);
或
canvas.toDatalessJSON()
123456
反序列化
canvas.loadFromJSON（JSON.stringify(canvas)）
1
透时图片随mouse移动显示
(function() {
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
fabric.loadSVGFromURL('../assets/135.svg', function(objects) {
var obj = objects[0].scale(0.25);
canvas.centerObject(obj);
canvas.add(obj);
obj.clone(function(c) {
canvas.add(c.set({ left: 100, top: 100, angle: -15 }));
});
obj.clone(function(c) {
canvas.add(c.set({ left: 480, top: 100, angle: 15 }));
});
obj.clone(function(c) {
canvas.add(c.set({ left: 100, top: 400, angle: -15 }));
});
obj.clone(function(c) {
canvas.add(c.set({ left: 480, top: 400, angle: 15 }));
});
canvas.on('mouse:move', function(options) {
var p = canvas.getPointer(options.e);
canvas.forEachObject(function(obj) {
var distX = Math.abs(p.x - obj.left),
distY = Math.abs(p.y - obj.top),
dist = Math.round(Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2)));
obj.setOpacity(1 / (dist / 20));
});
canvas.renderAll();
});
});
})();
1234567891011121314151617181920212223242526272829303132333435363738394041
锁定旋转
var canvas = new fabric.Canvas('c6');
canvas.add(new fabric.Rect({ width: 50, height: 50, fill: '#77f', top: 100, left: 100 }));
canvas.item(0).lockRotation = true;
this.__canvases.push(canvas);
1234
锁定大小缩放
var canvas = new fabric.Canvas('c7');
canvas.add(new fabric.Rect({ width: 50, height: 50, fill: '#77f', top: 100, left: 100 }));
canvas.item(0).lockScalingX = canvas.item(0).lockScalingY = true;
this.__canvases.push(canvas);
1234
锁定X轴移动
var canvas = new fabric.Canvas('c8');
canvas.add(new fabric.Rect({ width: 50, height: 50, fill: '#77f', top: 100, left: 100 }));
canvas.item(0).lockMovementX = true;
this.__canvases.push(canvas);
1234
锁定Y轴移动
var canvas = new fabric.Canvas('c9');
canvas.add(new fabric.Rect({ width: 50, height: 50, fill: '#77f', top: 100, left: 100 }));
canvas.item(0).lockMovementY = true;
this.__canvases.push(canvas);
1234
设置背景图
var canvas = new fabric.Canvas('c17');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));
this.__canvases.push(canvas);
1234
设置背景图前显
var canvas = new fabric.Canvas('c13');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
this.__canvases.push(canvas);
1234
设置背景色
var canvas = new fabric.Canvas('c5');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.backgroundColor = 'rgba(0,0,255,0.3)';
canvas.renderAll();
this.__canvases.push(canvas);
12345
锁定某个元素不能操作
var canvas = new fabric.Canvas('c4');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.add(new fabric.Rect({ left: 50, top: 50, fill: 'green', width: 30, height: 30 }));
canvas.add(new fabric.Rect({ left: 150, top: 50, fill: 'green', width: 30, height: 30 }));
canvas.add(new fabric.Rect({ left: 150, top: 150, fill: 'green', width: 30, height: 30 }));
canvas.add(new fabric.Rect({ left: 50, top: 150, fill: 'green', width: 30, height: 30 }));
canvas.item(0).selectable = false;
this.__canvases.push(canvas);
123456789
Mouse选择时变成手形
var canvas = new fabric.Canvas('c11');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.hoverCursor = 'pointer';
this.__canvases.push(canvas);
1234
Mouse选中时没有任何效果
var canvas = new fabric.Canvas('c10');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.item(0).hasControls = canvas.item(0).hasBorders = false;
canvas.on({
'mouse:down': function(e) {
if (e.target) {
e.target.opacity = 0.5;
canvas.renderAll();
}
},
'mouse:up': function(e) {
if (e.target) {
e.target.opacity = 1;
canvas.renderAll();
}
},
'object:moved': function(e) {
e.target.opacity = 0.5;
},
'object:modified': function(e) {
e.target.opacity = 1;
}
});
this.__canvases.push(canvas);
12345678910111213141516171819202122232425
Mouse选择中时没四边操作位
var canvas = new fabric.Canvas('c16');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.item(0).hasControls = false;
canvas.setActiveObject(canvas.item(0));
this.__canvases.push(canvas);
12345
Mouse选择中的一些样式
var canvas = new fabric.Canvas('c1');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
this.__canvases.push(canvas);
-------------------------------------------------
var canvas = new fabric.Canvas('c3');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.item(0).set({
borderColor: 'red',
cornerColor: 'green',
cornerSize: 6,
transparentCorners: false
});
canvas.setActiveObject(canvas.item(0));
this.__canvases.push(canvas);
--------------------------------------------------
var canvas = new fabric.Canvas('c19');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.item(0).set({
borderColor: 'gray',
cornerColor: 'black',
cornerSize: 12,
transparentCorners: true
});
canvas.setActiveObject(canvas.item(0));
this.__canvases.push(canvas);
---------------------------------------------------
var canvas = new fabric.Canvas('c15');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.item(0).hasBorders = false;
canvas.setActiveObject(canvas.item(0));
this.__canvases.push(canvas);
--------------------------------------------------------------------
1234567891011121314151617181920212223242526272829303132333435363738394041
璇转回复
(function() {
fabric.Object.prototype.transparentCorners = false;
var canvas = this.__canvas = new fabric.Canvas('c', {
backgroundColor: '#333',
HOVER_CURSOR: 'pointer'
});
var PolaroidPhoto = fabric.util.createClass(fabric.Object, fabric.Observable, {
H_PADDING: 20,
V_PADDING: 50,
originX: 'center',
originY: 'center',
initialize: function(src, options) {
this.callSuper('initialize', options);
this.image = new Image();
this.image.src = src;
this.image.onload = (function() {
this.width = this.image.width;
this.height = this.image.height;
this.loaded = true;
this.setCoords();
this.fire('image:loaded');
}).bind(this);
},
_render: function(ctx) {
if (this.loaded) {
ctx.fillStyle = '#fff';
ctx.fillRect(
-(this.width / 2) - this.H_PADDING,
-(this.height / 2) - this.H_PADDING,
this.width + this.H_PADDING * 2,
this.height + this.V_PADDING * 2);
ctx.drawImage(this.image, -this.width / 2, -this.height / 2);
}
}
});
var photo = new PolaroidPhoto('../assets/pug.jpg', {
top: 200,
left: 200,
scaleX: 0.2,
scaleY: 0.2
});
photo.on('image:loaded', canvas.renderAll.bind(canvas));
photo.drawBorders = photo.drawCorners = function() { return this };
function makeHandler(arg) {
return function(e) {
if (e.target) {
e.target.animate('angle', arg, {
duration: 100,
onChange: canvas.renderAll.bind(canvas)
});
}
};
}
canvas.on({
'mouse:down': makeHandler('+10'),
'mouse:up': makeHandler('-10')
});
canvas.add(photo);
})();
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
以点拉线
(function() {
var canvas = this.__canvas = new fabric.Canvas('c', { selection: false });
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
function makeCircle(left, top, line1, line2, line3, line4) {
var c = new fabric.Circle({
left: left,
top: top,
strokeWidth: 5,
radius: 12,
fill: '#fff',
stroke: '#666'
});
c.hasControls = c.hasBorders = false;
c.line1 = line1;
c.line2 = line2;
c.line3 = line3;
c.line4 = line4;
return c;
}
function makeLine(coords) {
return new fabric.Line(coords, {
fill: 'red',
stroke: 'red',
strokeWidth: 5,
selectable: false
});
}
var line = makeLine([ 250, 125, 250, 175 ]),
line2 = makeLine([ 250, 175, 250, 250 ]),
line3 = makeLine([ 250, 250, 300, 350]),
line4 = makeLine([ 250, 250, 200, 350]),
line5 = makeLine([ 250, 175, 175, 225 ]),
line6 = makeLine([ 250, 175, 325, 225 ]);
canvas.add(line, line2, line3, line4, line5, line6);
canvas.add(
makeCircle(line.get('x1'), line.get('y1'), null, line),
makeCircle(line.get('x2'), line.get('y2'), line, line2, line5, line6),
makeCircle(line2.get('x2'), line2.get('y2'), line2, line3, line4),
makeCircle(line3.get('x2'), line3.get('y2'), line3),
makeCircle(line4.get('x2'), line4.get('y2'), line4),
makeCircle(line5.get('x2'), line5.get('y2'), line5),
makeCircle(line6.get('x2'), line6.get('y2'), line6)
);
canvas.on('object:moving', function(e) {
var p = e.target;
p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });
p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top });
p.line3 && p.line3.set({ 'x1': p.left, 'y1': p.top });
p.line4 && p.line4.set({ 'x1': p.left, 'y1': p.top });
canvas.renderAll();
});
})();
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
由滚动条控制图片
(function() {
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
var $ = function(id){return document.getElementById(id)};
var rect = new fabric.Rect({
width: 100,
height: 100,
top: 100,
left: 100,
fill: 'rgba(255,0,0,0.5)'
});
canvas.add(rect);
var angleControl = $('angle-control');
angleControl.onchange = function() {
rect.setAngle(parseInt(this.value, 10)).setCoords();
canvas.renderAll();
};
var scaleControl = $('scale-control');
scaleControl.onchange = function() {
rect.scale(parseFloat(this.value)).setCoords();
canvas.renderAll();
};
var topControl = $('top-control');
topControl.onchange = function() {
rect.setTop(parseInt(this.value, 10)).setCoords();
canvas.renderAll();
};
var leftControl = $('left-control');
leftControl.onchange = function() {
rect.setLeft(parseInt(this.value, 10)).setCoords();
canvas.renderAll();
};
function updateControls() {
scaleControl.value = rect.getScaleX();
angleControl.value = rect.getAngle();
leftControl.value = rect.getLeft();
topControl.value = rect.getTop();
}
canvas.on({
'object:moving': updateControls,
'object:scaling': updateControls,
'object:resizing': updateControls,
'object:rotating': updateControls
});
})();
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
静态的canvas
(function() {
var canvas = this.__canvas = new fabric.StaticCanvas('c');
canvas.add(
new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
);
fabric.Image.fromURL('../lib/pug.jpg', function(img) {
canvas.add(img.set({ left: 400, top: 350, angle: 30 }).scale(0.25));
});
function animate() {
canvas.item(0).animate('top', canvas.item(0).getTop() === 500 ? '100' : '500', {
duration: 1000,
onChange: canvas.renderAll.bind(canvas),
onComplete: animate
});
}
animate();
})();
12345678910111213141516171819202122
对象外面包矩形
(function() {
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
var rect = new fabric.Rect({
left: 100,
top: 50,
width: 100,
height: 100,
fill: 'green',
angle: 20,
padding: 10
});
canvas.add(rect);
fabric.loadSVGFromURL('../assets/15.svg', function(objects, options) {
var shape = fabric.util.groupSVGElements(objects, options);
canvas.add(shape.scale(0.6));
shape.set({ left: 200, top: 100 }).setCoords();
canvas.renderAll();
canvas.forEachObject(function(obj) {
var setCoords = obj.setCoords.bind(obj);
obj.on({
moving: setCoords,
scaling: setCoords,
rotating: setCoords
});
})
});
canvas.on('after:render', function() {
canvas.contextContainer.strokeStyle = '#555';
canvas.forEachObject(function(obj) {
var bound = obj.getBoundingRect();
canvas.contextContainer.strokeRect(
bound.left + 0.5,
bound.top + 0.5,
bound.width,
bound.height
);
})
});
})();
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
元素移动到别的元素上时
(function() {
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = false;
var rect1 = new fabric.Rect({
width: 200, height: 100, left: 0, top: 50, angle: 30,
fill: 'rgba(255,0,0,0.5)'
});
var rect2 = new fabric.Rect({
width: 100, height: 100, left: 350, top: 250, angle: -10,
fill: 'rgba(0,200,0,0.5)'
});
var rect3 = new fabric.Rect({
width: 50, height: 100, left: 275, top: 350, angle: 45,
stroke: '#eee', strokeWidth: 10,
fill: 'rgba(0,0,200,0.5)'
});
var circle = new fabric.Circle({
radius: 50, left: 275, top: 75, fill: '#aac'
});
var triangle = new fabric.Triangle({
width: 100, height: 100, left: 50, top: 300, fill: '#cca'
});
canvas.add(rect1, rect2, rect3, circle, triangle);
canvas.on({
'object:moving': onChange,
'object:scaling': onChange,
'object:rotating': onChange,
});
function onChange(options) {
options.target.setCoords();//坐标
canvas.forEachObject(function(obj) {
if (obj === options.target) return;
obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
});
}
})();
12345678910111213141516171819202122232425262728293031323334353637383940414243
关于mouse移动的一些操作
(function() {
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
var canvas = this.__canvas = new fabric.Canvas('c');
var status = document.getElementById('status');
var mouseShape;
// add shapes
var shapes = [];
for (var i=1; i < 30; i++) {
for (var j=1; j < 40; j++) {
var circle = new fabric.Circle({
radius: 10
});
var text = new fabric.Text(i+','+j, {
fill: '#fff',
fontSize: 8,
fontFamily: 'sans-serif'
});
shapes.push(new fabric.Group([circle, text], {
left: j * 25,
top: i * 25,
hasControls: false
}));
}
}
canvas.add.apply(canvas, shapes);
function start() {
// cache the shapes
// ??
// disable editing
__canvas.selection = false;
__canvas.skipTargetFind = true;
// do some intensive animation
__canvas.on('mouse:move', function(o) {
var pos = __canvas.getPointer(o.e);
if (mouseShape) {
mouseShape.set({ left: pos.x, top: pos.y });
__canvas.renderAll();
}
else {
mouseShape = new fabric.Circle({
selectable: false,
radius: 30,
fill: 'rgba(0,0,255,0.5)',
left: pos.x,
top: pos.y
});
__canvas.add(mouseShape);
}
});
status.innerHTML = 'started';
}
document.getElementById("start").addEventListener("click", start);
document.getElementById("stop").addEventListener("click", function() {
// remove shapes from cache
// ??
// enable editing
__canvas.selection = true;
// remove animation
__canvas.off('mouse:move');
__canvas.remove(mouseShape);
mouseShape = null;
status.innerHTML = 'stopped';
});
start();
})();
---------------------------------------
(function() {
fabric.util.addListener(fabric.window, 'load', function() {
var canvas = this.__canvas || this.canvas,
canvases = this.__canvases || this.canvases;
canvas && canvas.calcOffset && canvas.calcOffset();
if (canvases && canvases.length) {
for (var i = 0, len = canvases.length; i < len; i++) {
canvases[i].calcOffset();
}
}
});
})();
//Canvas中两张图交互和包含时获取向对的元素
var c = canvas.getActiveObject();
var t;
//交互时获取另一个元素
for (var i = 0; i < canvas.getObjects().length; i++) {
if (canvas.getObjects()[i] === c)
{
ci = i;
}
//判断是否是交互的元素，一般为TRUE时是本身元素和被包含的元素
var b = c.intersectsWithObject(canvas.getObjects()[i]);
if (b && canvas.getObjects()[i]!=c)
{
t = canvas.getObjects()[i];
if (t === c) continue;
}
if (canvas.getObjects()[i] === t) {
ti = i;
}
}
//包含时获取对应的元素
for (var i = 0; i < canvas.getObjects().length; i++) {
if (canvas.getObjects()[i] === c) {
ci = i;
}
//判断是否是包含的元素，一般为TRUE时是本身元素和被包含的元素
var b = c.isContainedWithinObject(canvas.getObjects()[i]);
if (b && canvas.getObjects()[i] != c) {
t = canvas.getObjects()[i];
if (t === c) continue;
}
if (canvas.getObjects()[i] === t) {
ti = i;
}
//被包含时获取对应的元素
for (var i = 0; i < canvas.getObjects().length; i++) {
if (canvas.getObjects()[i] === c) {
ci = i;
}
//判断是否是被包含的元素，一般为TRUE时是本身元素和被包含的元素
var b = canvas.getObjects()[i].isContainedWithinObject(c);
if (b && canvas.getObjects()[i] != c) {
t = canvas.getObjects()[i];
if (t === c) continue;
}
if (canvas.getObjects()[i] === t) {
ti = i;
}
}
}
//设置选中项
canvas.setActiveObject(canvasimg)
//设置可见
line2.set({ visible: true });
//设置图层
FlowChar.sendToBack = function() {
var activeObject = this.canvas.getActiveObject();
if (activeObject)
{
canvas.sendToBack(activeObject);
}
};
/
canvas.on('mouse:over', function(e) {
e.target.setFill('red');
canvas.renderAll();
});
for (var i = 15; i--; ) {
var dim = fabric.util.getRandomInt(30, 60);
var klass = ['Rect', 'Triangle', 'Circle'][fabric.util.getRandomInt(0,2)];
var options = {
top: fabric.util.getRandomInt(0, 600),
left: fabric.util.getRandomInt(0, 600),
fill: 'green'
};
if (klass === 'Circle') {
options.radius = dim;
}
else {
options.width = dim;
options.height = dim;
}
canvas.add(new fabric[klass](options));
}
})();
//自由绘画
var canvas = new fabric.Canvas('c', { isDrawingMode: true });
//加载到集合中的位置
canvas.insertAt(rect4,0);//
//获取mouse光标在canvas中的位置
canvas.on("mouse:move",function(o){
var pointer=canvas.getPointer(o.e);
$("#div1").html(pointer.x+"---"+pointer.y);
});
//判断选中的类型
canvas.getActiveObject().type == "line"
//一些功能
selectable,visible
//锁定移动
var activeObject = canvas.getActiveObject();
if (String(activeObject.type) == "rect") {
activeObject.lockMovementX = true;
activeObject.lockMovementY = true;
}
//合并组
var activeGroup = this.canvas.getActiveGroup();
if (activeGroup) {
var objectsInGroup = activeGroup.getObjects();
canvas.discardActiveGroup();
var objs = new Array();
for (var obj in objectsInGroup) {
objs.push(objectsInGroup[obj]);
this.canvas.remove(objectsInGroup[obj]);
}
var group = new fabric.Group(objs);
this.canvas.add(group);
}
//编历 canvas中元素的另一种方法
for (var i = 0; i < canvas.getObjects().length; i++) {
var elem = canvas.getObjects()[i];
}
//绑定各个元素的方法
canvas.on('object:selected', function (options) {
alert(String(options.target.type));
});
//mouse状态
canvas.hoverCursor = 'pointer';
canvas.defaultCursor = 'pointer';
canvas.moveCursor = 'pointer';
//一些属性
//evented
//hasBorders //没四边
//hasControls//不能控件
//hasRotatingPoint //控制旋转点不可见
//includeDefaultValues//为 false 时不可以序列化
//lockMovementX
//lockMovementY
//lockScalingX
//lockScalingY
//lockUniScaling//只能成比例缩放
//selectable
//visible
//组中图片更换 src
var objs = ao.getObjects();
var t = objs[0];
t._element.attributes[0].nodeValue = isrc;
// 循环去遍历实现置底效果
var _allObjects = canvas.getObjects();
var _tempObjects = new Array();
var selectObject = canvas.getActiveObject();
_tempObjects.push(selectObject);
for (var i = 0; i < _allObjects.length; i++) {
if (_allObjects[i] != selectObject)
_tempObjects.push(_allObjects[i]);
}
for (var k = 0; k < _tempObjects.length; k++) {
for (var j = 0; j < _allObjects.length; j++) {
if (_tempObjects[k] == _allObjects[j]) {
canvas.remove(_allObjects[j]);
canvas.add(_tempObjects[k]);
}
}
}
canvas.renderAll();
//获取元素位置
var c = canvas.getActiveObject();
if (c == null) return;
alert(canvas.getObjects().indexOf(c));
//更换图片src
activeObject._element.src;
//无素框
var bound = obj.getBoundingRect();
/
你可以得到z - index:canvas.getObjects().indexOf(some_object)。
四个命令可以改变叠加顺序:
some_object.sendBackwards()
some_object.sendToBack()
some_object.bringForward()
some_object.bringToFront()。
//在一个固定的范圈内拖动
var goodtop, goodleft, boundingObject;
canvas.on("object:moving", function(){
var obj = this.relatedTarget;
var bounds = boundingObject;
obj.setCoords();
if(!obj.isContainedWithinObject(bounds)){
obj.setTop(goodtop);
obj.setLeft(goodleft);
canvas.refresh();
} else {
goodtop = obj.top;
goodleft = obj.left;
}
});
///
var canvas = new fabric.Canvas("bounded");
var boundingBox = new fabric.Rect({
fill: "none",
width: 600,
height: 400,
hasBorders: false,
hasControls: false,
lockMovementX: true,
lockMovementY: true,
evented: false,
stroke: "red"
});
var movingBox = new fabric.Rect({
width: 100,
height: 100,
hasBorders: false,
hasControls: false
});
canvas.on("object:moving", function() {
var top = movingBox.top;
var bottom = top + movingBox.height;
var left = movingBox.left;
var right = left + movingBox.width;
var topBound = boundingBox.top;
var bottomBound = topBound + boundingBox.height;
var leftBound = boundingBox.left;
var rightBound = leftBound + boundingBox.width;
// capping logic here
movingBox.setLeft(Math.min(Math.max(left, leftBound), rightBound - movingBox.width));
movingBox.setTop(Math.min(Math.max(top, topBound), bottomBound - movingBox.height));
});
canvas.add(boundingBox);
canvas.add(movingBox);
//去掉边框
canvas.item(0).hasControls = canvas.item(0).hasBorders = false;
//mouse指针
canvas.hoverCursor = 'pointer';
canvas.moveCursor = 'pointer';
//指针样式
//text是移动到文本上的那种效果
//wait是等待的那种效果
//default是默认效果
//e-resize是向右的箭头
//ne-resize是向右上的箭头
//n-resize是向上的箭头
//nw-resize是向左上的箭头
//w-resize是向左的箭头
//sw-resize是左下的箭头
//s-resize是向下的箭头
//se-resize是向右下的箭头
//auto是由系统自动给出效果
//
canvas.getActiveObject();
canvas.discardActiveObject();
//画图完成后可以选中
var objs= canvas.getObjects();
for(var obj in objs)
objs[obj].setCoords();
}
//循环canvas
canvas.forEachObject(function(obj){
});
2484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
