代码之家 › 专栏 › 技术社区 › anonymoose

BackgroundImage无法按预期使用多个函数

fabricjs jquery javascript

anonymoose · 技术社区 · 8 年前

我想跟你走 the Fabric.js tutorial 到 setBackgroundImage 对于一些与按钮相关联的图片中的一个,我感到有些奇怪。基本上,按钮1和3都是慢速/无响应/点击两下即可生效,按钮2不想本地加载或通过imgur加载。不管怎样,我使用的是fabric.js v.1.7.22和jquery 3.3.1。

var canvas = new fabric.Canvas('canvas');

canvas.setHeight(400);
canvas.setWidth(400);

$("#one").click(function(event) {
  canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png');
  canvas.renderAll();
});

$("#two").click(function(event) {
  canvas.setBackgroundImage('https://i.imgur.com/4Ut8gsw.png');
  canvas.renderAll();
});

$("#three").click(function(event) {
  canvas.setBackgroundImage('https://i.imgur.com/2S08Y3b.jpg');
  canvas.renderAll();
});

canvas {
  border: 1px solid #dddd;
}

button {
  margin-top: 20px;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>

<canvas id="canvas"></canvas>
<button id="one">
One
</button>

<button id="two">
Two
</button>

<button id="three">
Three
</button>

这是怎么回事?事先谢谢。

1 回复 | 直到 8 年前

Durga 8 年前

setBackgroundImage

renderAll()

var canvas = new fabric.Canvas('canvas');

canvas.setHeight(400);
canvas.setWidth(400);

$("#one").click(function(event) {
  canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png',function(){
   canvas.renderAll();
  },{
   width:canvas.width,
   height:canvas.height
  });
});

$("#two").click(function(event) {
  canvas.setBackgroundImage('https://i.imgur.com/4Ut8gsw.png',function(){
   canvas.renderAll();
  },{
   width:canvas.width,
   height:canvas.height
  });
});

$("#three").click(function(event) {
  canvas.setBackgroundImage('https://i.imgur.com/2S08Y3b.jpg',function(){
   canvas.renderAll();
  },{
   width:canvas.width,
   height:canvas.height
  });
});

canvas {
  border: 1px solid #dddd;
}

button {
  margin-top: 20px;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>

<canvas id="canvas"></canvas>
<button id="one">
One
</button>

<button id="two">
Two
</button>

<button id="three">
Three
</button>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前