We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
const canvas = canvasEditor.canvas; const circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 200, top: 200, }); const circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100, top: 0, });
const url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201702%2F21%2F20170221230517_J8jAW.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1699510542&t=dbbe6f9cc97643c88214a138c147fbee'; fabric.Image.fromURL(url, function (oImg) { // 在添加到画布之前,缩小图像, 并使其翻转。 oImg.scale(0.08).set('flipX', false); oImg.set({ stroke: 'blue', strokeWidth: 10, strokeDashArray: [5, 5], // 设置虚线样式 });
const group = new fabric.Group([circle1, circle2, oImg], { left: 200, top: 100, selectable: false, }); canvas.add(group); group.on('mousedown', function () { console.log('Group has been clicked'); }); // 鼠标按下事件 canvas.on('mouse:down', function (options) { console.log('mouse:down', options.e.clientX, options.e.clientY); }); // 鼠标移动事件 canvas.on('mouse:move', function (options) { // console.log(options.e.clientX, options.e.clientY); }); // 鼠标抬起事件 canvas.on('mouse:up', function (options) { console.log('Mouse Up'); }); // Listen for the selection event canvas.on('selection:created', function (e) { console.log('selection created'); }); canvas.on('selection:updated', function (e) { console.log('selection updated'); });
});
The text was updated successfully, but these errors were encountered:
如果我有表达不准确感谢指正。代码可以直接复制粘贴呈现效果。
Sorry, something went wrong.
在这个项目中,我绘制了两个矩形和一个图片,把这三个搞成一个group,然后设置这个group的selectable属性,按理来说设置为true就可以选中不管是点击选中还是框选选中,fasle则反之。但是在咱们这个项目中呈现的是如果我设置为false,第一次选不中,第二次为啥还能选中。同样的代码我脱离这个项目是对的,true就是能选中,false就是选不中。补充:不管我设置这个group的selectable为true还是false都是第一次选不中,第二次就选中了。
经过再次测试,咱这个项目好像对group做过初始化处理?
@huangwenboha563 是否可以提供是复现的Gif步骤,能够直观的看出来如何操作
No branches or pull requests
const canvas = canvasEditor.canvas;
const circle1 = new fabric.Circle({
radius: 50,
fill: 'red',
left: 200,
top: 200,
});
const circle2 = new fabric.Circle({
radius: 50,
fill: 'green',
left: 100,
top: 0,
});
const url =
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201702%2F21%2F20170221230517_J8jAW.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1699510542&t=dbbe6f9cc97643c88214a138c147fbee';
fabric.Image.fromURL(url, function (oImg) {
// 在添加到画布之前,缩小图像, 并使其翻转。
oImg.scale(0.08).set('flipX', false);
oImg.set({
stroke: 'blue',
strokeWidth: 10,
strokeDashArray: [5, 5], // 设置虚线样式
});
});
The text was updated successfully, but these errors were encountered: