使用fabricjs將已更改的鏡像對象設置爲之前的狀態

Question

正在使用fabricjs項目。在此我試圖在畫布上製作所選i-text對象的左側鏡像。鏡子左側工作正常，但後托盤將鏡像對象設置爲以前的狀態獲取位置和對象選擇的問題。獲得對象在以前的狀態再次我試圖使該對象左側鏡像，這不工作我的情況。

這裏是我的腳本

var canvas = new fabric.Canvas('c'); 
var text = new fabric.IText('Sample', { 
    left: 100, 
    top: 100, 
    fill: 'red' 
}); 
canvas.add(text); 


var mirror_left=0; 

document.getElementById('clone_left').addEventListener('click', function (e) { 
var obj = canvas.getActiveObject(); 
    var top = canvas.getActiveObject().get('top'); 
      var left = canvas.getActiveObject().get('left'); 


    if(obj.type=='i-text') 
    { 
     if(mirror_left ==0) 
     { 
      alert("setting mirror left"); 
      alert(top); alert(left); 

     //var top = obj.get('top'); 
      // var left = obj.get('left'); 
      obj.set({ 
       top:top, 
       left:left, 
      flipY:true, 
       //flipX:true, 
       angle:180 
       }); 
      canvas.renderAll(); 
      mirror_left++; 
      exit; 
     } 
      if(mirror_left==1) 
     { 
      alert("setting default"); 
     // top=top -50; 
      alert(top); alert(left); 
     // var top = obj.get('top'); 
      // var left = obj.get('left'); 
      obj.set({ 
       top:top, 
       left:left, 
       flipY:false, 
       flipX:false, 
       angle:0 
      }); 
      canvas.renderAll(); 
      mirror_left=0; 


     } 

    } 
}); 

Click here for fiddle demo

Answer 1

Fiddle Demo

//Html code 
    <canvas id="c" height="400" width="500" style=" border:1px solid gray;"> 
    </canvas> 
    <button id="clone_left" name="left">left</button> 
    <button id="clone_right" name="right">right</button> 
    <button id="clone_top" name="top">top</button> 
    <button id="clone_bottom" name="bottom">bottom</button>  

//Html code end 

    // **java script start** 

      //Using i-text 
      var mirror_left=0; 
      var mirror_top=0; 
      var mirror_left_path=0; 
      var mirror_top_path=0; 
      var mirror_left_image=0; 
      var mirror_top_image=0; 


      document.getElementById('clone_left').addEventListener('click', function (e) { 
      var obj = canvas.getActiveObject(); 

       if(obj.type=='i-text') 
       { 
        if(mirror_left ==0) 
        { 
         //alert("if 0 left"); 

        var top = obj.get('top'); 
        var flipy=obj.set('flipX', true); 

        obj.set(
          'top', top + 0, 
          'angle',180 , 
          'flipX','true' 

         ); 
         canvas.renderAll(); 
         mirror_left++; 
         exit; 
        } 
         if(mirror_left==1) 
        { 
         //alert("if 1 left"); 

        var top = obj.get('top'); 
         var left = obj.get('left'); 
         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 

        obj.set(
          'top', top + 0, 
          'angle',0 , 
          'flipX','false', 
           'flipY','false' 

         ); 

         canvas.renderAll(); 
         mirror_left=0; 


        } 

       } 

       //path left 
       if(obj.type=='path' || obj.type=='path-group') 
       { //alert("path"); 
        if(mirror_left_path==0) 
        { 
         //alert("if 0 left"); 

        var top = obj.get('top'); 
        var flipy=obj.set('flipX', true); 

        obj.set(
          'top', top + 0, 
          'angle',180 , 
          'flipX','true' 


         ); 
         canvas.renderAll(); 
         mirror_left_path++; 
         exit; 
        } 
         if(mirror_left_path==1) 
        { 
         //alert("if 1 left"); 

        var top = obj.get('top'); 
         var left = obj.get('left'); 
         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 

        obj.set(
          'top', top + 0, 
          'angle',0 , 
          'flipX','false', 
           'flipY','false' 

         ); 

         canvas.renderAll(); 
         mirror_left_path=0; 


        } 

       } 

       //non svg image left 
       if(obj.type=='image') 
       { //alert("path"); 
        if(mirror_left_image==0) 
        { 
         //alert("if 0 left"); 

        var top = obj.get('top'); 
        var flipy=obj.set('flipX', true); 

        obj.set(
          'top', top + 0, 
          'angle',180 , 
          'flipX','true' 


         ); 
         canvas.renderAll(); 
         mirror_left_image++; 
         exit; 
        } 
         if(mirror_left_image==1) 
        { 
         //alert("if 1 left"); 

        var top = obj.get('top'); 
         var left = obj.get('left'); 
         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 

        obj.set(
          'top', top + 0, 
          'angle',0 , 
          'flipX','false', 
           'flipY','false' 

         ); 

         canvas.renderAll(); 
         mirror_left_image=0; 


        } 

       } 


      }); 

      document.getElementById('clone_right').addEventListener('click', function (e) { 
      var obj = canvas.getActiveObject(); 

       if(obj.type=='i-text') 
       { 
        var left = obj.get('left'); 
        if(mirror_left ==0) 
        { 
         // alert("if 0 left"); 

        var top = obj.get('top'); 
        var flipy=obj.set('flipX', true); 

        obj.set(
          'top', top + 0, 
          'angle',180 , 
          'flipX','true', 
           'left',left + 2 

         ); 
         canvas.renderAll(); 
         mirror_left++; 
         exit; 
        } 
         if(mirror_left==1) 
        { 
         // alert("if 1 left"); 

        var top = obj.get('top'); 
         var left = obj.get('left'); 
         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 

        obj.set(
          'top', top + 0, 
          'angle',0 , 
          'flipX','false', 
           'flipY','false', 
           'left',left + 2 

         ); 

         canvas.renderAll(); 
         mirror_left=0; 


        } 

       } 

       //path right 
      if(obj.type=='path' || obj.type=='path-group') 
       { //alert("path"); 
        if(mirror_left_path==0) 
        { 
         //alert("if 0 left"); 

        var top = obj.get('top'); 
        var flipy=obj.set('flipX', true); 

        obj.set(
          'top', top + 0, 
          'angle',180 , 
          'flipX','true' 


         ); 
         canvas.renderAll(); 
         mirror_left_path++; 
         exit; 
        } 
         if(mirror_left_path==1) 
        { 
         //alert("if 1 left"); 

        var top = obj.get('top'); 
         var left = obj.get('left'); 
         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 

        obj.set(
          'top', top + 0, 
          'angle',0 , 
          'flipX','false', 
           'flipY','false' 

         ); 

         canvas.renderAll(); 
         mirror_left_path=0; 


        } 

       } 

       //non svg image left 
       if(obj.type=='image') 
       { //alert("path"); 
        if(mirror_left_image==0) 
        { 
         //alert("if 0 left"); 

        var top = obj.get('top'); 
        var flipy=obj.set('flipX', true); 

        obj.set(
          'top', top + 0, 
          'angle',180 , 
          'flipX','true' 


         ); 
         canvas.renderAll(); 
         mirror_left_image++; 
         exit; 
        } 
         if(mirror_left_image==1) 
        { 
         //alert("if 1 left"); 

        var top = obj.get('top'); 
         var left = obj.get('left'); 
         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 

        obj.set(
          'top', top + 0, 
          'angle',0 , 
          'flipX','false', 
           'flipY','false' 

         ); 

         canvas.renderAll(); 
         mirror_left_image=0; 


        } 

       } 
      }); 

      document.getElementById('clone_top').addEventListener('click', function (e) { 
      var obj = canvas.getActiveObject(); 

       if(obj.type=='i-text') 
       { 
        if(mirror_top==0) 
        { 
         // alert("if 0 left"); 
         var top = obj.get('top'); 
        var flipx=obj.set('flipY', true); 
         obj.set(
          'top', top + 0, 
          'angle', 90, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top++; 
         exit; 

        } if(mirror_top==1) { 
          //alert("if 1 left"); 
         //var clone = obj.clone(); 
         var top = obj.get('top'); 

         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 
         obj.set(
          'top', top + 0, 
          'angle', 0, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top=0; 

        } 

       } 
       //path top 
      if(obj.type=='path' || obj.type=='path-group') 
       { //alert("path"); 
        if(mirror_top_path==0) 
        { 
         //alert("if 0 left"); 
         var top = obj.get('top'); 
        var flipx=obj.set('flipY', true); 
         obj.set(
          'top', top + 0, 
          'angle', 90, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top_path++; 
         exit; 

        } 
        if(mirror_top_path==1) { 
          //alert("if 1 left"); 
         // var clone = obj.clone(); 
         var top = obj.get('top'); 

         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 
         obj.set(
          'top', top + 0, 
          'angle', 0, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top_path=0; 

        } 

       } 

       //non svg image top 
      if(obj.type=='image') 
       { //alert("path"); 
        if(mirror_top_image==0) 
        { 
         //alert("if 0 left"); 
         var top = obj.get('top'); 
        var flipx=obj.set('flipY', true); 
         obj.set(
          'top', top + 0, 
          'angle', 90, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top_image++; 
         exit; 

        } 
        if(mirror_top_image==1) { 
          //alert("if 1 left"); 
         // var clone = obj.clone(); 
         var top = obj.get('top'); 

         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 
         obj.set(
          'top', top + 0, 
          'angle', 0, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top_image=0; 

        } 

       } 
      }); 

      document.getElementById('clone_bottom').addEventListener('click', function (e) { 

      var obj = canvas.getActiveObject(); 
       if(obj.type=='i-text') 
       { 
        if(mirror_top==0) 
        { 
         //alert("if 0 left"); 
         var top = obj.get('top'); 
        var flipx=obj.set('flipY', true); 
         obj.set(
          'top', top + 0, 
          'angle', 90, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top++; 
         exit; 

        } if(mirror_top==1) { 
         // alert("if 1 left"); 
         // var clone = obj.clone(); 
         var top = obj.get('top'); 

         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 
         obj.set(
          'top', top + 0, 
          'angle', 0, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top=0; 

        } 

       } 

       //path bottom 
      if(obj.type=='path' || obj.type=='path-group') 
       { 
      // alert("path"); 
        if(mirror_top_path==0) 
        { 
         // alert("if 0 left"); 
         var top = obj.get('top'); 
        var flipx=obj.set('flipY', true); 
         obj.set(
          'top', top + 0, 
          'angle', 90, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top_path++; 
         exit; 

        } if(mirror_top_path==1) { 
         // alert("if 1 left"); 
         // var clone = obj.clone(); 
         var top = obj.get('top'); 

         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 
         obj.set(
          'top', top + 0, 
          'angle', 0, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top_path=0; 

        } 

       } 
       //non svg image bottom 
      if(obj.type=='image') 
       { //alert("path"); 
        if(mirror_top_image==0) 
        { 
         //alert("if 0 left"); 
         var top = obj.get('top'); 
        var flipx=obj.set('flipY', true); 
         obj.set(
          'top', top + 0, 
          'angle', 90, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top_image++; 
         exit; 

        } 
        if(mirror_top_image==1) { 
          //alert("if 1 left"); 
         // var clone = obj.clone(); 
         var top = obj.get('top'); 

         var flipy=obj.set('flipX', false); 
         var flipx=obj.set('flipY', false); 
         obj.set(
          'top', top + 0, 
          'angle', 0, 
          'flipY','true'    
         ); 
         canvas.renderAll(); 
         mirror_top_image=0; 

        } 

       } 
      }); 

    // **Fabric srcipt end**