패브릭 js 활성 모양의 다각형 그리기

Question

패브릭 js를 사용하여 프로젝트에서 그리기 다각형을위한 계측기를 작성해야합니다. 나는 sctipt를 찾았습니다. https://github.com/taqimustafa/fabricjs-polygon 그것은 나에게 완벽합니다. 그러나이 스크립트는 1.7.11을 사용하는 동안 패브릭 1.6.3에서 작동합니다.

그리고 직물 1.7.11과 activeShape에 약간의 문제가 있습니다. 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