vendredi 27 février 2015

Keeping a portion of an image always visible on the canvas

I want to make sure that my instance of fabric.Image is always visible.


It doesn't need to be 100% visible, but a portion of it should always be seen. I've seen a few other questions that are similar and I've based my solution on them, but I haven't found anything that completely solves the problem.


My current solution works when no rotation (angles) have been applied to the image. If the angle is at 0 then this solution is perfect, but once the angle start changing I'm having problems.



this.canvas.on('object:moving', function (e) {
var obj = e.target;
obj.setCoords();

var boundingRect = obj.getBoundingRect();
var max_pad_left_over_width = 50;//obj.currentWidth * .08;
var max_pad_left_over_height = 50;//obj.currentHeight * .08;
var max_top_pos = -(obj.currentHeight - max_pad_left_over_height);
var max_bottom_pos = obj.canvas.height - max_pad_left_over_height;
var max_left_pos = -(obj.currentWidth - max_pad_left_over_width);
var max_right_pos = obj.canvas.width - max_pad_left_over_width;

if(boundingRect.top < max_top_pos) {
obj.setTop(max_top_pos);
}

if(boundingRect.left < max_left_pos){
obj.setLeft(max_left_pos);
}

if(boundingRect.top > max_bottom_pos) {
obj.setTop(max_bottom_pos);
}

if(boundingRect.left > max_right_pos) {
obj.setLeft(max_right_pos);
}
});


I've created an example: http://ift.tt/1AS42wq


Notice how when no rotation (angle) is applied you cannot force the image to leave the visible canvas. Now, add some rotation to the image and move it around. How can I get the rotated image to also always stay within view? Thanks.


Aucun commentaire:

Enregistrer un commentaire