如何从画布中删除现有的剪切区域
How to remove existing clipping region from canvas
我在canvas.clipTo函数中使用ctx.scale()方法给出不同的画布形状。现在我想在选择框中选择墙时从画布中删除现有的剪切区域,我正在使用织物.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);
这是我的小提琴演示
这个可能会有所帮助。 http://jsfiddle.net/xadqg/13/
canvas.clipTo = null;
canvas.backgroundColor = 'white';
canvas.renderAll();
相关文章:
- JavaScript-如果以前不存在文本,如何从文本区域删除新行
- 使用VBScript或Javascript从文本框(文本区域)中删除最后一行空/空行
- 通过点击文本区域添加和删除多个标签
- 如何删除选定的文本区域
- 当请求时,我如何从文本区域删除null.GetAttribute为null,以及如何从servlet修改标签的可见性
- Tinymce删除<html>在文本区域中输出时标记
- 删除文本区域中某个文本后出现的换行符
- 传单区域选择在 Internet Explorer 上删除
- 使用jQuery删除多个文本区域框
- 粘贴文本时删除文本区域中的字符
- 用于右键单击<输入>或<文本区域>上的删除的 IE 事件
- 当用户离开图表区域时,删除同步图表中的工具提示
- 修剪标签上的空白区域,而不删除<输入>内部
- 从 IOS 通知区域删除警报(推送通知)
- 从可放置区域删除可拖动项目时是否存在事件
- jquery检查字符串是否已从文本区域删除,并从select中删除选项
- 从Javascript中的文本区域删除某些文本
- 使用Javascript从文本区域删除BBcode
- 从文本区域删除顶行的最整洁(和快速)方法
- 仅在第一次单击时从多个文本区域删除文本