Déplacer l'objet à l'intérieur de la toile limite de

Je suis en train de la limite de l'objet en mouvement à l'intérieur de la toile, mais je suis certaine difficulté à déplacer l'objet avec la limite de la zone sur le côté gauche et en haut et quand je l'échelle de l'objet de grande taille cette fois je ne suis pas en mesure à la limite de l'objet en mouvement sur la gauche et de la partie supérieure de la toile

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)
        }
});
InformationsquelleAutor Sanjay Nakate | 2014-04-07
  1. 48
    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);
        }
});
    • La meilleure solution que j'ai vu.
    • son travail comme prévu. génial solution!!!
    • Si vous avez besoin pour permettre aux objets d'être déplacé en partie à l'extérieur de la toile de délimitation, voir mon amélioré la fonction ci-dessous
    • Nice! Est-il possible de remplacer le tissu de la fonction si cela aurait une incidence sur tous les tissus toiles?
    InformationsquelleAutor Balaji
  2. 7

    Ici vous pouvez trouver solution:-

    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/

    • L'échelle n'a pas fonctionné pour moi avec la version 1.7.11. D'abord vous avez besoin pour construire le tissu de toile avec {stateful : true,}. la deuxième j'ai eu à utiliser _stateProperties au lieu de originalState. Troisièmement, vous devez obj.saveState(); après ces changements.
    InformationsquelleAutor Mullainathan
  3. 5

    Il suffit d'ajouter le code ci-dessous dans votre fichier js et modifier la valeur de X(à gauche) et Y(en haut) en fonction de votre toile de hauteur et de largeur.

    //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
    • Est-il de toute façon à force d'objets d'aller à l'extérieur de la toile ?
    • posez la question sur pile
    • C'est tout simplement une question oui / non, si oui, alors comment ? Pas besoin de question supplémentaire. La pile est très égoïste modérateur de la communauté, ils ferment à la question de la négative, Si j'ai simplement poser des ques.
    • vous devez vous déplacer de façon permanente et exactement ce que vous voulez après les déplacer.???
    InformationsquelleAutor Sanjay Nakate
  4. 1

    J'ai juste Modifié Balaji du code un peu fonctionne mieux maintenant

    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);
    }});
    InformationsquelleAutor Surya T
  5. 1

    Que j'avais besoin de ce, voici mon surchargé la fonction basée sur Balaji du code pour définir un décalage, de sorte que les objets peuvent être en partie seulement a montré à l'intérieur de la toile.

    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);
      }
});
    InformationsquelleAutor metamagikum