我绘制多边形后，我想将画布的不透明度更改为刚绘制的多边形。我认为这可能与剪辑有关，但我不确定。内部的多边形和线条应具有100％的不透明度，但其他所有内容（多边形外部的背景和线条应具有50％的不透明度）
prototypefabric.polygon = {
drawPolygon: function () {
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();
});
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: '#BB2026'
})
}
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: 'green',
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();
console.log(points);
} 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: 'rgb(255, 255, 255, 0)',
hasBorders: false,
hasControls: false,
id: 'plotOutline'
});
canvas.add(polygon);
var overlayRect = new fabric.Rect({
width: canvas.get("width"),
height: canvas.get("height"),
selectable: false,
fill: "rgb(255, 255, 255, 0.5)"
});
var clippingPolygon = new fabric.Polygon(polygon.points, {
left: -(overlayRect.get("width") / 2) - polygon.get("left") * -1,
top: -(overlayRect.get("height") / 2) - polygon.get("top") * -1
});
var clipGroup = new fabric.Group([clippingPolygon], {
inverted: true
});
overlayRect.clipPath = clipGroup;
canvas.add(overlayRect);
console.log(JSON.stringify(polygon.points) + 'points');
if (polygon.id == 'plotOutline') {
$('#saveStepOne').prop('disabled', false);
}
activeLine = null;
activeShape = null;
polygonMode = false;
canvas.selection = true;
}
};
绘图多边形
这是获取特定多边形（可以是以前动态创建的）之外所有内容的不透明度的方法。我只是不知道如何将绘图线移到外面也要应用不透明度：
您也可以检查此演示沙箱：https://codesandbox.io/s/stackoverflow-60810389-fabric-js-362-vm92q
var canvas = new fabric.Canvas("canvas", {
isDrawingMode: true
});
fabric.Image.fromURL("https://picsum.photos/500/350", function(img) {
// add background image
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
});
var originalPolygon = new fabric.Polygon(
[{ x: 0, y: 0 }, { x: 250, y: 0 }, { x: 220, y: 140 }, { x: 0, y: 140 }],
{
left: 10,
top: 10,
fill: "white",
stroke: "red",
strokeWidth: 2,
selectable: false
}
);
// An Overlay that covers the whole canvas
var overlayRect = new fabric.Rect({
width: canvas.get("width"),
height: canvas.get("height"),
selectable: false,
fill: "rgb(255, 255, 255, 0.8)"
});
// The clipPath object uses top,left,scale.... to position itself starting from the center of the object that is clipping
// For more details check https://github.com/fabricjs/api-discussion/issues/1
var clippingPolygon = new fabric.Polygon(originalPolygon.points, {
left: -(overlayRect.get("width") / 2) - originalPolygon.get("left") * -1,
top: -(overlayRect.get("height") / 2) - originalPolygon.get("top") * -1
});
var clipGroup = new fabric.Group([clippingPolygon], {
inverted: true
});
overlayRect.clipPath = clipGroup;
// Comment adding of the orgiinalPolygon to see better the clipping effect
canvas.add(originalPolygon);
canvas.add(overlayRect);
canvas.renderAll();body {
font-family: sans-serif;
}
canvas {
border: 2px solid #333;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"></script>
<div id="app">
<canvas id="canvas" width="500" height="350"></canvas>
</div>