我想创建一个包含图像和文本组合的组,并且表现得像一个组,但是当我这样做时:
https://gist.github.com/1682293
我不能移动那个组。为了使它工作,我需要首先将图像和文本添加到画布,然后使用这些图像和文本创建一个组,然后删除单独添加的图像和文本。
我在那里做错了什么?
我想创建一个包含图像和文本组合的组,并且表现得像一个组,但是当我这样做时:
https://gist.github.com/1682293
我不能移动那个组。为了使它工作,我需要首先将图像和文本添加到画布,然后使用这些图像和文本创建一个组,然后删除单独添加的图像和文本。
我在那里做错了什么?
这似乎已在最新版本的 fabric.js 中得到修复。我能够让它与版本 0.9.15一起工作:
function drawImage(name, left, top) {
fabric.Image.fromURL('../nav-host.png', function (img) {
var oImg = img.scale(4);
var caption = new fabric.Text(name, {
fontFamily: 'Arial'
});
var group = new fabric.Group([oImg, caption], { left: left, top: top });
canvas.add(group);
});
}
我想出这个来添加从计数器脚本动态生成的部分文本。此代码将添加由图像和文本组成的组。文本设置在图像上方,每次单击按钮时都会自行更新,因为它会将它们添加到画布中。因此,当您第一次单击按钮时,文本会显示 Sticky Card #1。下一次单击将为您提供第二组,其中包含“Sticky card #2”的文字。图像只有 30 像素 X 30 像素。
这是我页面顶部的计数器脚本。
$(window).load(function(){
$('.stickycard').click(function() {
$('#cardcount').html(function(i, val) { return val*1+1; });
});
});
这是我在 kitchensink.js 中使用的 fabric.js 代码。
if ($(element).hasClass('image1')) {
fabric.Image.fromURL('toolimg/yellow-stickycard.png', function(img) {
var yellcard = img.scale(1.0).set({ left: 22, top: 15 });
var cardcount = $('#cardcount').text();
var sticky = new fabric.Text('Sticky Card #'+ (cardcount), {
fontSize: 12,
cornerSize: 6
});
var group = new fabric.Group([ sticky, yellcard ], {
left: 150,
top: 100,
cornerSize: 6
});
group.set({
left: left,
top: top,
});
canvas.add(group);
});
}
这是我的按钮和显示计数的 div 的 HTML。
<button type="button" class="btn image1 stickycard" id="yellstickycard"><img src="toolimg/yellow-stickycard.png" /></button>
<div id="cardcount">0</div>