ファブリックjsはアクティブな形状のポリゴンを描画します

Question

私は、ファブリックjsを使用して私のプロジェクトで描画ポリゴンのための計測器を作成する必要があります。 私はsctiptを見つけたhttps://github.com/taqimustafa/fabricjs-polygonそれは私にとって完璧です。 しかし、私は1.7.11を使用している間、このスクリプトはファブリック1.6.3で動作します。

そして、私はファブリック1.7.11とアクティブシェイプに小さな問題があります。 ActiveShapeは、最初と最後の点の間で90度の領域のみを描画します。 https://codepen.io/daer_ru/pen/pdOMyX

var min = 99; 
var max = 999999; 
var polygonMode = true; 
var pointArray = new Array(); 
var lineArray = new Array(); 
var activeLine; 
var activeShape = false; 
var canvas 
$(window).load(function(){ 
    prototypefabric.initCanvas(); 
    $('#create-polygon').click(function() { 
     prototypefabric.polygon.drawPolygon(); 
    }); 
}); 
var prototypefabric = new function() { 
    this.initCanvas = function() { 
     canvas = window._canvas = new fabric.Canvas('c'); 
     canvas.setWidth($(window).width()); 
     canvas.setHeight($(window).height()-$('#nav-bar').height()); 
     //canvas.selection = false; 

     canvas.on('mouse:down', function (options) { 
      if(options.target && options.target.id == pointArray[0].id){ 
       prototypefabric.polygon.generatePolygon(pointArray); 
      } 
      if(polygonMode){ 
       prototypefabric.polygon.addPoint(options); 
      } 
     }); 
     canvas.on('mouse:up', function (options) { 

     }); 
     canvas.on('mouse:move', function (options) { 
      if(activeLine && activeLine.class == "line"){ 
       var pointer = canvas.getPointer(options.e); 
       activeLine.set({ x2: pointer.x, y2: pointer.y }); 

       var points = activeShape.get("points"); 
       points[pointArray.length] = { 
        x:pointer.x, 
        y:pointer.y 
       } 
       activeShape.set({ 
        points: points 
       }); 
       canvas.renderAll(); 
      } 
      canvas.renderAll(); 
     }); 
    }; 
}; 



prototypefabric.polygon = { 
    drawPolygon : function() { 
     polygonMode = true; 
     pointArray = new Array(); 
     lineArray = new Array(); 
     activeLine; 
    }, 
    addPoint : function(options) { 
     var random = Math.floor(Math.random() * (max - min + 1)) + min; 
     var id = new Date().getTime() + random; 
     var circle = new fabric.Circle({ 
      radius: 5, 
      fill: '#ffffff', 
      stroke: '#333333', 
      strokeWidth: 0.5, 
      left: (options.e.layerX/canvas.getZoom()), 
      top: (options.e.layerY/canvas.getZoom()), 
      selectable: false, 
      hasBorders: false, 
      hasControls: false, 
      originX:'center', 
      originY:'center', 
      id:id 
     }); 
     if(pointArray.length == 0){ 
      circle.set({ 
       fill:'red' 
      }) 
     } 
     var points = [(options.e.layerX/canvas.getZoom()),(options.e.layerY/canvas.getZoom()),(options.e.layerX/canvas.getZoom()),(options.e.layerY/canvas.getZoom())]; 
     line = new fabric.Line(points, { 
      strokeWidth: 2, 
      fill: '#999999', 
      stroke: '#999999', 
      class:'line', 
      originX:'center', 
      originY:'center', 
      selectable: false, 
      hasBorders: false, 
      hasControls: false, 
      evented: false 
     }); 
     if(activeShape){ 
      var pos = canvas.getPointer(options.e); 
      var points = activeShape.get("points"); 
      points.push({ 
       x: pos.x, 
       y: pos.y 
      }); 
      var polygon = new fabric.Polygon(points,{ 
       stroke:'#333333', 
       strokeWidth:1, 
       fill: '#cccccc', 
       opacity: 0.3, 
       selectable: false, 
       hasBorders: false, 
       hasControls: false, 
       evented: false 
      }); 
      canvas.remove(activeShape); 
      canvas.add(polygon); 
      activeShape = polygon; 
      canvas.renderAll(); 
     } 
     else{ 
      var polyPoint = [{x:(options.e.layerX/canvas.getZoom()),y:(options.e.layerY/canvas.getZoom())}]; 
      var polygon = new fabric.Polygon(polyPoint,{ 
       stroke:'#333333', 
       strokeWidth:1, 
       fill: '#cccccc', 
       opacity: 0.3, 
       selectable: false, 
       hasBorders: false, 
       hasControls: false, 
       evented: false 
      }); 
      activeShape = polygon; 
      canvas.add(polygon); 
     } 
     activeLine = line; 

     pointArray.push(circle); 
     lineArray.push(line); 

     canvas.add(line); 
     canvas.add(circle); 
     canvas.selection = false; 
    }, 
    generatePolygon : function(pointArray){ 
     var points = new Array(); 
     $.each(pointArray,function(index,point){ 
      points.push({ 
       x:point.left, 
       y:point.top 
      }); 
      canvas.remove(point); 
     }); 
     $.each(lineArray,function(index,line){ 
      canvas.remove(line); 
     }); 
     canvas.remove(activeShape).remove(activeLine); 
     var polygon = new fabric.Polygon(points,{ 
      stroke:'#333333', 
      strokeWidth:0.5, 
      fill: 'red', 
      opacity: 1, 
      hasBorders: false, 
      hasControls: false 
     }); 
     canvas.add(polygon); 

     activeLine = null; 
     activeShape = null; 
     polygonMode = false; 
     canvas.selection = true; 
    } 
}; 

Answer 1

あなたはポリゴンを作成中objectCaching:falseを使用する必要があります。ここでは

は一例です。完全なポリゴンを使用しないと、オブジェクトのキャッシュが作成されるので、変更がなければ次のレンダーコールでレンダリングされません。

ここが更新されましたcodepen