如何在Fabric.js v5中实现透明文本带背景效果/文本抠图

问题描述 投票：0回答：1

我想向我的编辑器添加一个效果，用户可以在其中添加类似于下图的文本剪切效果

please check the effect I'm looking for

有没有人可以帮助我，任何帮助将不胜感激！！！！

javascript html jquery fabricjs
1个回答
0
投票

我通过使用组找到了解决方案，

            var canvas = new fabric.Canvas('canvas');
            var img_src = 'http://i.imgur.com/tENv1w4.jpg';
            var img = new Image();
            img.src = img_src;
            img.crossOrigin = "anonymous";  // important - set crossOrigin before src!
            img.onload = function(){
               canvas.setBackgroundImage(new fabric.Image(img, {
                  width: canvas.width,
                  height: canvas.height,
                  originX: 'left',
                  originY: 'top'
                }), canvas.renderAll.bind(canvas));
            };
            canvas.setZoom(canvas.getZoom() *1.0);
            var helloText = new fabric.Text('Hello', {
                            fontSize: 50,
                            top: 10,
                            left: 10,
                            originX: 0,
                            originY: 0,
                            padding: 20
            });
            var textBoundingRect = helloText.getBoundingRect();
            var background = new fabric.Rect({
                top: textBoundingRect.top,
                left: textBoundingRect.left,
                width: textBoundingRect.width,
                height: textBoundingRect.height,
                fill: 'red',
                backgroundColor: 'transparent',
            });
            var group = new fabric.Group([background, helloText], {});

            helloText.set({
                globalCompositeOperation: 'destination-out'
            });
            canvas.add(group).setActiveObject(group);
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js" integrity="sha512-CeIsOAsgJnmevfCi2C7Zsyy6bQKi43utIjdA87Q0ZY84oDqnI0uwfM9+bKiIkI75lUeI00WG/+uJzOmuHlesMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 
    <title>Document</title>
</head>

<body>
    Hello
    <canvas id="canvas" width="500" height="300"></canvas>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.