将图像剪辑为椭圆形

Question

我有一个fabric.JS画布，可以向其中添加对象，但是我希望能够将这些对象like in the fabricjs.com clip demos裁剪成椭圆形。

到目前为止，这就是我正在使用的内容（JSFiddle）。我现在可以将对象裁剪为圆形。

var canvas = new fabric.Canvas("c");
canvas.isDrawingMode = false;

// create a rectangle object
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 200,
  height: 200
});

$("#clipCircle").click(function() {
  var obj = canvas.getActiveObject();
  if (!obj) return;

  if (obj.clipTo) {
    obj.clipTo = null;
  } else {
    var radius = obj.width < obj.height ? (obj.width / 2) : (obj.height / 2);
    obj.clipTo = function(ctx) {
      ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
    };
  }
  canvas.renderAll();
});

// "add" rectangle onto canvas
canvas.add(rect);

// select, draw
$("#select").click(function() {
  canvas.isDrawingMode = false;
});
$("#draw").click(function() {
  canvas.isDrawingMode = true;
});
var activeObject = null;
canvas.on('selection:created', function(options) {
  activeObject = options.target;
  $("#alpha").slider("option", "value", activeObject.opacity);
});
canvas.on('selection:updated', function(options) {
  activeObject = options.target;
  $("#alpha").slider("option", "value", activeObject.opacity);
});
canvas.on('selection:cleared', function(options) {
  activeObject = null;
});
$("#alpha").slider({
  max: 1,
  min: 0,
  step: 0.1,
  value: 1,
  slide: function(event, ui) {
    activeObject && (activeObject.opacity = ui.value)
    canvas.requestRenderAll();
  },
  stop: function(event, ui) {
    canvas.requestRenderAll();
  }
});

canvas {
  border: solid 1px #000;
}

fieldset {
  max-width: 350px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<br>
<button id="draw">Draw</button>
<button id="select">Select</button>
<button id="clipCircle">Crop to Circle</button>
<button id="clipOval">Crop to Oval</button>
<br>
<br>
<fieldset>
  <legend>Controls</legend>
  <label for="alpha">Opactity</label>
  <div id="alpha" name="alpha"></div>
</fieldset>

我该怎么做？预先感谢。

Answer 1

这是我的建议，这对您的示例非常有用。

通过在一个轴上将ctx缩放为0.5，您可以投射缩放为椭圆形的法球，然后恢复ctx。

var radius = obj.width < obj.height ? (obj.width / 2) : (obj.height / 2);
obj.clipTo = function(ctx) {
    ctx.scale(0.5, 1);
    ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
    ctx.restore();
};

屏幕截图：

修剪红色立方体对象时，会产生以下红色形状：