Как удалить существующую область отсечения с холста

0

Я даю разные формы холста, используя метод ctx.scale() в canvas.clipTo. теперь я хочу удалить существующую область отсечения из моего холста, когда я выбираю стену в своем поле выбора, я использую fabric.js, у кого есть идея, как решить эту проблему? вот мой код //html

 <canvas id="c" width="632" height="485"></canvas>
<span class="tt1">DECAL SHAPE</span>
<select name="Decal Shape" id="clipingShape" style="height:30px;">
<option> WALL </option>
<option> CIRCLE </option>
<option> OVAL </option>
<option> HORIZONTAL RECTANGLE  </option>
<option> VERTICAL RECTANGLE  </option>                                                
</select>

Сценарий //

var canvas = new fabric.Canvas('c');
$("#clipingShape").change(function(e){
 var w;
 var h;
 var ctx = canvas.getContext('2d');
 var shape =$('#clipingShape :selected').val();
    canvas.backgroundColor = 'red';
  if(shape=="WALL") 
  {
alert("how to remove cloping");
  }
canvas.clipTo = function(ctx) {
 if(shape=="OVAL")
 {
 w=canvas.width / 4;
 h=canvas.height / 2.4;
 ctx.save();
 ctx.scale(2, 1.2);
 ctx.arc(w, h, 155, 0, 2 * Math.PI, true);
 }
 if(shape=="CIRCLE")
 {
 w=canvas.width / 2;
 h=canvas.height / 2;
 ctx.save();
 ctx.arc(w, h, 230, 0, Math.PI * 2,true); //  Circle Shape
 }
 if(shape=="VERTICAL RECTANGLE")
 { 
 w=canvas.width - 217;
 h=canvas.height - 70;
 //alert(w);
 //alert(h);
 ctx.save();
 ctx.rect(110, 35, w, h); 
 }
  if(shape=="HORIZONTAL RECTANGLE")
 { 
 w=canvas.width - 100;
 h=canvas.height - 100;
 ctx.save();
 ctx.rect(50, 50, w, h); 
 }
  if(shape=="WALL")
 { 
 w=canvas.width - 100;
 h=canvas.height - 100;
 ctx.save();
 ctx.clear();
 }
 ctx.stroke();
 ctx.restore();

 };
 canvas.renderAll();

});
// canvas.renderAll();
var text;
text = new fabric.Text('Honey', {
  fontSize: 50,
  left: 100,
  top: 100,
  lineHeight: 1,
  originX: 'left',
  fontFamily: 'Helvetica',
  fontWeight: 'bold'
});
  canvas.add(text);

Вот моя демонстрация Fiddle

Теги:
canvas
fabricjs

1 ответ

1
Лучший ответ

Это может быть помощь. http://jsfiddle.net/xadqg/13/

canvas.clipTo = null;
canvas.backgroundColor = 'white';
canvas.renderAll();

Ещё вопросы

Сообщество Overcoder
Наверх
Меню