Fabric.js fillRule -偶数(减去形状)

Question

我试图在多边形中使用fillRule = 'evenodd‘在fabric.js中做洞

globalCompositeOperation不适合我，因为我需要看到多边形孔像这样中的形状

这是我的代码：小提琴

有两个例子：

• Fabric.js 2多边形(不起作用)
• 原生html5画布2多边形(作品)

当我为fabric.js多边形设置fabric.js：'evenodd‘时，它将进入fabric函数，并将上下文填充设置为'eveneodd’

_renderFill: function(ctx) {
   ...
      if (this.fillRule === 'evenodd') {
        ctx.fill('evenodd');
      }
      ...
      ctx.restore();
    },

但还是不起作用。请告诉我如何使用“enevod”如果fabric.js

Answer 1

‘甚至’填充规则在一个fabric对象中工作得很好。即使使用组对象，也不能将此规则用于单独的对象并将它们组合在一起。在单独发生的形状的组呈现中，这意味着每个对象调用：

context.fill(); 

或

context.fill('evenodd')

对于多个对象使用‘偶数’规则在Fabric.js中缺少功能。

这里是一些解决办法，如何使用‘甚至’规则的一个主题多边形和多个减法多边形。

步骤：

1. 查找减去多边形的最近点与主题多边形的最后一点。
2. 按最近索引排序减法多边形数组
3. 将主语和减法多边形合并为一个。

这是一个小提琴。

这段代码需要改进。它给出了一个如何在多边形上使用“甚至”规则造洞的想法。

​

var canvas = new fabric.Canvas('c', { selection: false });
var polygons = [];

var subjectPoly = [{x:30,y:10}, {x:300,y:50}, {x:20,y:290}];
var subtractPoly1 = [{x:50,y:50}, {x:200,y:140}, {x:220,y:40}];
var subtractPoly2 = [{x:10,y:10}, {x:300,y:200}, {x:60,y:150}];
var subtractPoly = [];
subtractPoly.push(subtractPoly1);
subtractPoly.push(subtractPoly2);

 var result = combinePolygonArrays(subjectPoly,sortPolygonArray(subtractPoly, closetPoint(subjectPoly[0],subtractPoly)));
  var poly1 = new fabric.Polygon(result, {
  	 fillRule: 'evenodd',
     fill: 'green',
     selectable: false      });      
  canvas.add( poly1);
var c= (new fabric.Circle({
    radius: 50,
    left: 125,
    top: 50,
    fill: 'red'
}));

canvas.add(c);
c.sendToBack();
  
function closetPoint(subjPolyPoint, subtrPoly){
	var minIndexes = [];
	for (var j in subtrPoly){
  	var minLength = Length(subjPolyPoint, subtrPoly[j][0]);
  	var	minIndex = 0;
    for (var i = 1; i < subtrPoly[j].length; i++){
      var newLength = Length(subjPolyPoint, subtrPoly[j][i])
        if (minLength > newLength){
          minLength = newLength;
          minIndex = i;
        }
    }
    minIndexes.push({arrayIndex: j, elementIndex: minIndex});
  }
    return minIndexes;
}

function Length(point1, point2) {      
    var x1 = point1.x,
        x2 = point2.x,
        y1 = point1.y,
        y2 = point2.y;
		    return Math.sqrt((x1 -= x2) * x1 + (y1 -= y2) *y1);
}

function sortPolygonArray(array, indexes){
var result = [];
	for (var i in indexes){
  	var newArray = [];
  	var originalLength = array[indexes[i].arrayIndex].length;
  	while (newArray.length != originalLength){
      if (indexes[i].elementIndex == originalLength){
        indexes[i].elementIndex = 0;
      }
   	 newArray.push(array[indexes[i].arrayIndex][indexes[i].elementIndex]);
   	 indexes[i].elementIndex++;
 	 }
   result.push(newArray);
  }
	
  return result;
}

function combinePolygonArrays(subjPoly, subtrPoly){
	var newArray = subjPoly;
  var lastSubjectPoint = subjPoly[subjPoly.length - 1];
  for (var i in subtrPoly){
  	var firstSubtractedPoint = subtrPoly[i][0];
    newArray = newArray.concat(subtrPoly[i]);
  	newArray.push(firstSubtractedPoint);
 		newArray.push(lastSubjectPoint);
  }
  return newArray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.11/fabric.js"></script>
<canvas id="c" width="500" height="350" style="border:1px solid #ccc"></canvas>

​