examples - fabricjs mobile

Mueve el objeto dentro del límite del lienzo

Question

Estoy tratando de limitar el objeto en movimiento dentro del lienzo, pero tengo dificultad para mover el objeto con un área límite en la parte superior e izquierda y cuando escala el objeto con un tamaño grande, no puedo limitar el objeto en movimiento Lado izquierdo y superior del lienzo.

canvas.observe("object:moving", function(e){
var obj = e.target;
// if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
return;
}
var halfw = obj.currentWidth/2;
var halfh = obj.currentHeight/2;
var bounds = {tl: {x: halfw, y:halfh},
br: {x: obj.canvas.width-halfw, y: obj.canvas.height-halfh}
};
// top-left corner
if(obj.top < bounds.tl.y || obj.left < bounds.tl.x){
obj.top = Math.max(obj.top, bounds.tl.y);
obj.left = Math.max(obj.left, bounds.tl.x )
}
// bot-right corner
if(obj.top > bounds.br.y || obj.left > bounds.br.x){
obj.top = Math.min(obj.top, bounds.br.y);
obj.left = Math.min(obj.left, bounds.br.x)
}
});

Answer 1

Acabo de modificar el código de Balaji un poco funciona mejor ahora

canvas.on(''object:moving'', function (e) {
var obj = e.target;
// if object is too big ignore
if(obj.getScaledHeight() > obj.canvas.height || obj.getScaledWidth() > obj.canvas.width){
return;
}
obj.setCoords();
// top-left corner
if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
}
// bot-right corner
if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
}});

Answer 2

Aquí puedes encontrar la solución: -

var canvas = window._canvas = new fabric.Canvas(''c'');
canvas.selection = false;
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: ''red'',
cornerSize: 12,
padding: 0
});
text = new fabric.Text(''Sample'',{
top: canvas.height/2,
left: canvas.width/2,
fill: ''#000000''
});
canvas.add(text);
canvas.setActiveObject(text);
canvas.observe(''object:scaling'', function (e) {
var obj = e.target;
if(obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width){
obj.setScaleY(obj.originalState.scaleY);
obj.setScaleX(obj.originalState.scaleX);
}
obj.setCoords();
if(obj.getBoundingRect().top - (obj.cornerSize / 2) < 0 ||
obj.getBoundingRect().left - (obj.cornerSize / 2) < 0) {
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top + (obj.cornerSize / 2));
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left + (obj.cornerSize / 2));
}
if(obj.getBoundingRect().top+obj.getBoundingRect().height + obj.cornerSize > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width + obj.cornerSize > obj.canvas.width) {
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top - obj.cornerSize / 2);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left - obj.cornerSize /2);
}
});
canvas.observe(''object:moving'', function (e) {
var obj = e.target;
if(obj.getHeight() > obj.canvas.height || obj.getWidth() > obj.canvas.width){
obj.setScaleY(obj.originalState.scaleY);
obj.setScaleX(obj.originalState.scaleX);
}
obj.setCoords();
if(obj.getBoundingRect().top - (obj.cornerSize / 2) < 0 ||
obj.getBoundingRect().left - (obj.cornerSize / 2) < 0) {
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top + (obj.cornerSize / 2));
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left + (obj.cornerSize / 2));
}
if(obj.getBoundingRect().top+obj.getBoundingRect().height + obj.cornerSize > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width + obj.cornerSize > obj.canvas.width) {
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top - obj.cornerSize / 2);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left - obj.cornerSize /2);
}
});

http://jsfiddle.net/jw1827fm/1/

Answer 3

Como necesitaba esto, aquí está mi función con exceso de trabajo basada en el código de Balaji para establecer un desplazamiento, por lo que los objetos solo se pueden mostrar parcialmente dentro del lienzo.

canvas.on(''object:moving'', function (e) {
var obj = e.target;
// if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
return;
}
// set offset for moving out the canvas (20 % of object persists in canvas)
var offsetWidth = obj.getBoundingRect().width * 0.8;
var offsetHeight = obj.getBoundingRect().height * 0.8;
obj.setCoords();
// top-left corner
if(obj.getBoundingRect().top < -offsetHeight || obj.getBoundingRect().left < -offsetWidth){
obj.top = Math.max(obj.top, obj.top-(obj.getBoundingRect().top+offsetHeight));
obj.left = Math.max(obj.left, obj.left-(obj.getBoundingRect().left+offsetWidth));
}
// bot-right corner
if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height + offsetHeight || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width + offsetWidth){
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top+offsetHeight);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left+offsetWidth);
}
});

Answer 4

Solo agregue el código a continuación en su archivo js y cambie el valor de la escala X (izquierda) e Y (arriba) de acuerdo con la altura y el ancho de su lienzo.

// canvas moving limit
canvas.observe("object:moving", function(e){
var obj = e.target;
// if object is too big ignore
var halfw = obj.currentWidth/2;
var halfh = obj.currentHeight/2;
var bounds = {tl: {x: halfw, y:halfh},
br: {x: obj.canvas.width , y: obj.canvas.height }
};
// top-left corner
// alert("text");
if(obj.top < bounds.tl.y || obj.left < bounds.tl.x){
obj.top = Math.max(obj.top, ''10'' );
obj.left = Math.max(obj.left , ''50'' )
}
// bot-right corner
if(obj.top > bounds.br.y || obj.left > bounds.br.x ){
obj.top = Math.min(obj.top, ''360'' );
obj.left = Math.min(obj.left, ''470'' )
}
});
// end canvas moving limit

Answer 5

canvas.on(''object:moving'', function (e) {
var obj = e.target;
// if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
return;
}
obj.setCoords();
// top-left corner
if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
}
// bot-right corner
if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){
obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
}
});