Избегайте переполнения в области клипа с холста fabricjs

Question

Я использую клип, чтобы определить область рисования на холсте. когда пользователь перемещается внутри объекта в определенную область, тогда элемент не отображается, но когда я сохраняю холст в качестве изображения, которое они появляются на картинке. как я могу избежать переполнения? или ограничительные элементы перемещаются?

страница снимок экрана:

сохраненное изображение ::

Answer 1

Это можно сделать с помощью двух способов:

1) ОБТРАВОЧНЫЙ области холста в a Прямоугольник

canvas.clipTo = function(ctx) {      
    ctx.beginPath(); 
    var rect = new fabric.Rect({ 
      fill: 'red', 
      opacity: 0, 
      left: 0, 
      top: 0, 
      width: canvas.width, 
      height: canvas.height 
    }); 
    ctx.strokeStyle = 'black'; 
    rect.render(ctx); 
    ctx.stroke(); 
} 

2) Ограничить объекты прямоугольной границы

constrainToBounds = function (activeObject) { 
     if(activeObject) 
     { 
      var angle = activeObject.getAngle() * Math.PI/180, 
      aspectRatio = activeObject.width/activeObject.height, 
      boundWidth = getBoundWidth(activeObject), 
      boundHeight = getBoundHeight(activeObject); 
      if(boundWidth > bounds.width) { 
       boundWidth = bounds.width; 
       var targetWidth = aspectRatio * boundWidth/(aspectRatio * Math.abs(Math.cos(angle)) + Math.abs(Math.sin(angle))); 
        activeObject.setScaleX(targetWidth/activeObject.width); 
        activeObject.setScaleY(targetWidth/activeObject.width); 
        boundHeight = getBoundHeight(activeObject); 
       } 
       if(boundHeight > bounds.height) { 
        boundHeight = bounds.height; 
        var targetHeight = boundHeight/(aspectRatio * Math.abs(Math.sin(angle)) + Math.abs(Math.cos(angle))); 
        activeObject.setScaleX(targetHeight/activeObject.height); 
        activeObject.setScaleY(targetHeight/activeObject.height); 
        boundWidth = getBoundWidth(activeObject); 
       } 
       //Check constraints 
       if(activeObject.getLeft() < bounds.x + boundWidth/2) 
        activeObject.setLeft(bounds.x + boundWidth/2); 
       if(activeObject.getLeft() > (bounds.x + bounds.width - boundWidth/2)) 
        activeObject.setLeft(bounds.x + bounds.width - boundWidth/2); 
       if(activeObject.getTop() < bounds.y + boundHeight/2) 
        activeObject.setTop(bounds.y + boundHeight/2); 
       if(activeObject.getTop() > (bounds.y + bounds.height - boundHeight/2)) 
        activeObject.setTop(bounds.y + bounds.height - boundHeight/2); 
      } 
    } 

Мы использовали их в приложении Tshirt живого - http://www.riaxe.com/html5-tshirt-designer-application/

Надеется, что это помогает :)