Html5 canvas 如何在fabric.js中创建组
我想创建一个组,该组将包含图像和文本的组合,并将作为一个组进行操作,但是当我这样做时: 我不能移动那群人。要使其正常工作,我需要首先将图像和文本添加到画布,然后使用这些图像和文本创建一个组,然后删除单独添加的图像和文本Html5 canvas 如何在fabric.js中创建组,html5-canvas,fabricjs,Html5 Canvas,Fabricjs,我想创建一个组,该组将包含图像和文本的组合,并将作为一个组进行操作,但是当我这样做时: 我不能移动那群人。要使其正常工作,我需要首先将图像和文本添加到画布,然后使用这些图像和文本创建一个组,然后删除单独添加的图像和文本 我做错了什么?最新版本的fabric.js似乎已经修复了这一问题。我能够让它工作: 我这样做是为了添加从计数器脚本动态生成的部分文本。 此代码将添加由图像和文本组成的组。文本设置为位于图像上方,在将文本添加到画布时,每次单击按钮,文本都会自动更新。因此,当您第一次单击按钮时,文
我做错了什么?最新版本的fabric.js似乎已经修复了这一问题。我能够让它工作:
我这样做是为了添加从计数器脚本动态生成的部分文本。 此代码将添加由图像和文本组成的组。文本设置为位于图像上方,在将文本添加到画布时,每次单击按钮,文本都会自动更新。因此,当您第一次单击按钮时,文本将显示Sticky Card#1。下一次单击将显示第二组,文本为Sticky card#2。图像只有30px 30px 这是我页面头部的反脚本
$(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>
0
<button type="button" class="btn image1 stickycard" id="yellstickycard"><img src="toolimg/yellow-stickycard.png" /></button>
<div id="cardcount">0</div>