文章/答案/技术大牛

发布

社区首页 >问答首页 >构造:如何使画布对象(矩形)始终在鼠标上活动:向下事件也是？

问构造:如何使画布对象(矩形)始终在鼠标上活动:向下事件也是？
EN

Stack Overflow用户

提问于 2020-03-04 09:10:10

回答 1查看 850关注 0票数 0

如何使画布对象(矩形)的选择在mouse:down事件之后始终处于活动状态？我尝试过使用subTargetCheck:true属性，但该属性不符合上述要求。

this.fabricObject = new fabric.Rect({
  left: this.objectSize.left,
  top: this.objectSize.top,
  width: this.objectSize.width,
  height: this.objectSize.height,
  fill: '#ccc',
  padding: 10,
  subTargetCheck: true
});

this.canvas.add(this.fabricObject);
this.fabricObject.center().setCoords();
this.canvas.renderAll();

用于set始终活动的=>代码

this.canvas.on('mouse:down', (e) => {
  console.log(e.target)
  this.canvas.getObjects().map((object:any) => {
    object.set('active', true);
    this.canvas.renderAll();
  })
});

=>，如果我这样做的颜色填充，那么它是运行良好的鼠标出事件。

this.canvas.on('mouse:down', (e) => {
  console.log(e.target)
  this.canvas.getObjects().map((object:any) => {
    object.set('fill', 'green');
    this.canvas.renderAll();
  })
});

参考文献：https://jsfiddle.net/jasie/r3fqu4p6/12/

就像在琴键中，当点击正方形时，它将处于活动状态，而当单击方块的外侧时，它将停用.所以我想要激活的同时点击外面的方块。

canvas

mouseevent

fabricjs

mouseout

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-05 19:52:34

您需要使用canvas.setActiveObject()来手动设置画布上的活动对象。

var canvas = new fabric.Canvas("canvas");
var ourRect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 75,
    height: 50,
    fill: "green",
    padding: 10,
    subTargetCheck: true
});

canvas.add(ourRect);

canvas.on("mouse:down", object => {
    canvas.setActiveObject(ourRect);
});

请查看此CodeSansbox演示：https://codesandbox.io/s/stackoverflow-60522500-fabric-js-1720-ekocp

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60522500

复制

相似问题

问构造:如何使画布对象(矩形)始终在鼠标上活动:向下事件也是？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问构造:如何使画布对象(矩形)始终在鼠标上活动:向下事件也是？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问构造:如何使画布对象(矩形)始终在鼠标上活动:向下事件也是？
EN