Инструмент Лассо на холсте html5 - замена функции clipTo на clipPath - PullRequest
Новая
       7

Инструмент Лассо на холсте html5 - замена функции clipTo на clipPath

0 голосов
/ 30 декабря 2018

Код, показанный ниже, взят из этого поста .Он работает нормально при использовании fabric.js / 1.4.0, но когда я обновляю fabric.js до 2.4.3, он не запускается.Проблема в том, что функция clipTo была заменена новой функцией clipPath.Кто-нибудь знает, как обновить этот код, чтобы он работал с clipPath?Я просмотрел документы для clipPath и почти 2 дня искал в Google и Stackoverflow, но все еще потерян. 

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function() {
    var OwnCanv = new fabric.Canvas('c', {
        isDrawingMode: true
    });

    var imgInstance = new fabric.Image(img, {
        left: 0,
        top: 0,
    });
    OwnCanv.add(imgInstance);

    OwnCanv.freeDrawingBrush.color = "purple"
    OwnCanv.freeDrawingBrush.width = 4

    OwnCanv.on('path:created', function(options) {
        var path = options.path;
        OwnCanv.isDrawingMode = false;
        OwnCanv.remove(imgInstance);
        OwnCanv.remove(path);
        OwnCanv.clipTo = function(ctx) {
            path.render(ctx);
        };
        OwnCanv.add(imgInstance);
    });
}

img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>

<canvas id="c" width="500" height="500"></canvas>

Ответы [ 2 ]

0 голосов
/ 30 декабря 2018

Вам нужно иметь objectCaching на false на пути.Проверьте здесь: https://jsfiddle.net/jw6rLx5f/2/

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function() {
    var OwnCanv = new fabric.Canvas('c', {
        isDrawingMode: true
    });

    var imgInstance = new fabric.Image(img, {
        left: 0,
        top: 0,
    });
    OwnCanv.add(imgInstance);

    OwnCanv.freeDrawingBrush.color = "purple"
    OwnCanv.freeDrawingBrush.width = 4

    OwnCanv.on('path:created', function(options) {
        var path = options.path;
        path.objectCaching= false;
       
        OwnCanv.isDrawingMode = false;
        OwnCanv.remove(imgInstance);
        OwnCanv.remove(path);
        OwnCanv.clipTo = function(ctx) {
        	 ctx.save();
            path.render(ctx);
            ctx.restore();
        };
      
        OwnCanv.add(imgInstance);
    });
}

img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas>
0 голосов
/ 30 декабря 2018

Хорошо, поэтому путь сразу после создания уже кэширован.Что вам нужно сделать, это установить цвет заливки, который не является нулевым, используя метод 'set'.Затем установите путь как clipPath для холста или самого объекта.

Если вы хотите установить его только для объекта, вам необходимо пересчитать его правильное положение. 

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');

img.onload = function() {
    var OwnCanv = new fabric.Canvas('c', {
        isDrawingMode: true
    });

    var imgInstance = new fabric.Image(img, {
        left: 0,
        top: 0,
    });
    OwnCanv.add(imgInstance);
    OwnCanv.controlsAboveOverlay = true;
    OwnCanv.freeDrawingBrush.color = "purple"
    OwnCanv.freeDrawingBrush.width = 4

    OwnCanv.on('path:created', function(options) {
        var path = options.path;
        path.set('fill', 'black');
        console.log(path)
        OwnCanv.isDrawingMode = false;
        OwnCanv.remove(path);
        OwnCanv.clipPath = path;
    });
}

img.src = "http://upload.wikimedia.org/wikipedia/commons/3/33/Jbassette4.jpg?uselang=fi";
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>

<canvas id="c" width="500" height="500"></canvas>
...