FabricJS：在对象周围添加自定义路径

Question

我正在开发一个面料设计 js 应用程序，我需要一个像链接中的设计应用程序一样的贴纸模切效果
http://www.stickeryou.com/2/stickermaker/selectart
转到此链接首先添加一些文本和图像以及更改图像模切的方法

我的代码是

canvas = new fabric.Canvas('design-canvas');

jQuery('#add-text-btn').click(function() {
  var message = $('textarea#add-text-value').val();
           
            var new_text = new fabric.Text(message, { left: 100, top: 100, fontSize: 20 });
            canvas.add(new_text);
            canvas.setActiveObject(canvas.item(canvas.getObjects().length-1));      
        });
        
        // image manage
    var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
    function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function(event) {
            var img = new Image();
            img.onload = function() {
                var imgInstance = new fabric.Image(img, {
                    scaleX: 0.2,
                    scaleY: 0.2
                })
                canvas.add(imgInstance);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }
    // image manage

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="7" class="form-control" id="add-text-value">Your Text Here</textarea>
<button id="add-text-btn">ADD TEXT </button>
<input class="btn btn-default" type="file" id="imageLoader" name="imageLoader" />
<div style="background:#eee"><canvas id="design-canvas" width="500" height="400"></canvas></div>

我想要这样的东西
提前感谢您的帮助

Answer 1

通过在图像周围逐渐增加白色阴影来创建贴纸效果。

1. 使用document.createElement 创建 2 个内存画布
2. 在画布#1 上绘制图像。
3. 使用 2px 白色阴影将 canvas#1 绘制到 canvas#2。
4. 将画布#2 绘制到画布#1。
5. 重复步骤#3-4，直到获得所需的贴纸效果。
6. Canvas#2 将拥有带有贴纸效果的图像。

然后，您可以使用 canvas#2 作为图像源创建fabric.Image。 （是的……画布可以作为 fabric.Image 的图像源。）

这是示例代码和演示：

var canvas = new fabric.Canvas('design-canvas');

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/owl1.png";
function start(){
  var stickerCanvas=stickerEffect(img,12);
  var imgInstance = new fabric.Image(stickerCanvas,{})
  canvas.add(imgInstance);
}

function stickerEffect(img,grow){
  var canvas1=document.createElement("canvas");
  var ctx1=canvas1.getContext("2d");
  var canvas2=document.createElement("canvas");
  var ctx2=canvas2.getContext("2d");
  canvas1.width=canvas2.width=img.width+grow*2;
  canvas1.height=canvas2.height=img.height+grow*2;
  ctx1.drawImage(img,grow,grow);
  ctx2.shadowColor='white';
  ctx2.shadowBlur=2;
  for(var i=0;i<grow;i++){
    ctx2.drawImage(canvas1,0,0);
    ctx1.drawImage(canvas2,0,0);
  }
  ctx2.shadowColor='rgba(0,0,0,0)';   
  ctx2.drawImage(img,grow,grow);
  return(canvas2);
}

body{ background-color:navy; }
canvas{border:1px solid red;}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="design-canvas" width=300 height=300></canvas>