Clip để vẽ đường dẫn

Question

Tôi đang cố gắng vẽ đường dẫn và sử dụng nó làm mặt nạ của canvas của tôi.

'use strict'; 

var canvas = new fabric.Canvas('c', { 
    hoverCursor: 'pointer', 
    isDrawingMode: true 
}); 

canvas.freeDrawingBrush = new fabric.PencilBrush(canvas); 
canvas.freeDrawingBrush.color = '#000'; 
canvas.freeDrawingBrush.width = 100; 

fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) { 

    canvas.add(img); 
    canvas.setWidth(img.getWidth()); 
    canvas.setHeight(img.getHeight()); 
    canvas.centerObject(img); 
    img.selectable = false; 
}); 

canvas.on('path:created', function(data) { 

    var path = data.path; 

    canvas.remove(path); 
    canvas.clipTo = function(context) { 
     path.render(context); 
    }; 

    canvas.isDrawingMode = false; 
    canvas.renderAll(); 
}); 

Làm cách nào để làm cho toàn bộ con đường trở thành vùng hiển thị của hình ảnh?

http://jsfiddle.net/db45yhpo/

EDIT

Đây là những gì tôi đang cố gắng để đạt được, nhưng sử dụng FabricJS.

http://www.createjs.com/demos/easeljs/alphamaskreveal

Answer 1

Tôi không có kinh nghiệm với fabricjs, do đó có thể là một cách tốt hơn để xử lý này nhưng tôi sẽ:
Vẽ lại con đường của bạn trên một canvas ẩn,
Sau đó tạo một fabric.Image mới () từ canvas ẩn này,
Đặt thông số globalCompositeOperation thành "" đích-trên đỉnh ",
Vẽ trên canvas gốc.

var canvas = new fabric.Canvas('c', { 
 
    hoverCursor: 'pointer', 
 
    isDrawingMode: true 
 
}); 
 

 
canvas.freeDrawingBrush = new fabric.PencilBrush(canvas); 
 
canvas.freeDrawingBrush.color = '#000'; 
 
canvas.freeDrawingBrush.width = 100; 
 

 
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(img) { 
 
    canvas.add(img); 
 
    canvas.setWidth(img.getWidth()); 
 
    canvas.setHeight(img.getHeight()); 
 
    canvas.centerObject(img); 
 
    img.selectable = false; 
 
}); 
 

 
canvas.on('path:created', function(data) { 
 
    var clipper = document.createElement('canvas'); 
 
    clipper.width = canvas.width; 
 
    clipper.height = canvas.height; 
 
    var ctx = clipper.getContext('2d'); 
 
    var path = data.path; 
 
    data.path.render(ctx); 
 
    canvas.remove(path); 
 
    canvas.isDrawingMode = false; 
 
    var oImg = new fabric.Image(clipper) 
 
    oImg.globalCompositeOperation = 'destination-atop'; 
 
    canvas.add(oImg); 
 
    canvas.renderAll(); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<canvas id="c"></canvas>