如何解决fabric.js:如何制作带有笔触阴影等的椭圆形图像?
我一直试图将图像显示为椭圆形,但没有成功。
下面是我的代码片段,它适用于圆形,但是当我们将图像从矩形转换为椭圆时存在间隙
如何在 html 画布中同时添加 rx 和 ry? 这是当前代码将我的矩形图像转换为椭圆的方式,高度和宽度存在差距,它们不准确。
示例输出图像:
fabric.util.loadImage(imageURL,function (img) {
var oImg = new fabric.Image(img);
if (slot.image_shape == "ellipse") {
let shadow = (options && options.shadow) || {
affectStroke: true,};
const radius =
oImg.width < oImg.height ? oImg.width / 2 : oImg.height / 2;
oImg.set({
clipTo: function (ctx) {
return ctx.arc(0,radius,Math.PI * 2,false);
},});
}
解决方法
不幸的是,我不知道您实际使用的是哪个 fabric.js 版本,但从 2.4.0 开始,您可以使用 clipPath 属性。结合 Ellipse 类,您可以直接使用椭圆形状作为掩码 - 这让您可以直接输入 rx 和 ry 的值,而不仅仅是半径。
这是一个例子:
var canvas = window._canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('https://picsum.photos/200/200',function(img) {
img.set({
hasControls: false,hasBorders: false,left: 0,top: 0,clipPath: new fabric.Ellipse({
rx: 100,ry: 50,originX: 'center',originY: 'center',}),});
canvas.add(img);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400" class="canvas"></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。