当我按住鼠标按钮移动鼠标时,Fabric.js–元素是未定义的
Fabric.js – element is undefined when I move the mouse holding down the mouse button
我有一个由许多不透明度为0的圆环组成的画布。我想在I:时将其更改为1
- 单击圆
- 当鼠标按钮按下时(用光标)在圆圈上移动
Nr 1很容易。这个问题可以用画布来解决
但我不知道该如何解决第二个问题。以下是我的代码中的一些片段:
var mouseDown = 0;
document.body.onmousedown = function() {
mouseDown = 1;
}
document.body.onmouseup = function() {
mouseDown = 0;
}
canvas.on('mouse:move', function(options) {
if (mouseDown && options.target) {
options.target.set('opacity', 1)
canvas.renderAll()
}});
但是当按下鼠标按钮时,选项.target始终未定义
Object {target: undefined, e: MouseEvent}
我在FabricJS中使用typescript,遇到了同样的问题。我发现你可以使用canvas.findTarget方法让FabricJS为你做这件事。我相信您可以将其转换为相应的javascript。
canvas.on('mouse:move', (e) => {
var target = canvas.findTarget(<MouseEvent>(e.e), true);
}
我对Fabric.js不是很熟悉,所以可能有更好的解决方案,但我的看法是:
canvas.on('mouse:move',function(options){
var pt = { x: options.e.clientX, y: options.e.clientY };
if( circle.containsPoint(pt) ) {
if( !circle.mouseOver ) {
circle.mouseOver = true;
console.log( 'over circle, yo' );
circle.set('opacity', 0.5);
canvas.renderAll();
}
} else if( circle.mouseOver ) {
circle.mouseOver = false;
circle.set('opacity', 1.0);
canvas.renderAll();
}
});
基本上,我们要做所有繁重的工作,看看我们是否在感兴趣的对象上,并在第一次鼠标悬停在它上面时更改它的属性,然后在鼠标离开它时再次更改。您可以将其与mouseDown
变量结合起来,只在鼠标放下时执行这些操作。
你可以在这里看到我的解决方案:
http://jsfiddle.net/qwpB3/
相关文章:
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 将鼠标悬停在同级元素上的 jquery 上轻拂
- 将鼠标悬停在Angular JS中的一个元素上,并将Class添加到另一个元素中
- 如何在元素中处理鼠标事件,但不能在其子元素上处理
- 只要用户将鼠标悬停在jQuery中的某个元素上,就可以执行多次单击
- 单击其他元素或鼠标向上时隐藏输入框,但保留一次焦点
- 如果鼠标在元素上快速移动和关闭,则防止.hoop事件被垃圾邮件发送
- 为什么不是't html<对象>元素响应鼠标事件
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- 如果鼠标离开父对象,则隐藏元素
- 当鼠标悬停在iframe上时,如何在iframe之外的元素上触发类
- 如何在鼠标悬停时显示带有拉斐尔元素(圆、线)的上下文菜单
- 当鼠标也在触摸另一个元素时,d3.js鼠标悬停事件未被触发
- 从鼠标点(及更多)查询位置元素
- 如何添加效果,以便将鼠标悬停在 SVG 元素上使其变大
- 可缩放容器鼠标上的可拖动元素在创建时从辅助对象上浮动
- 绘制DOM元素:鼠标事件会被背景元素混淆
- 将鼠标悬停在一个元素上,可以将类添加到另一个元素中
- 使用Firefox bookmarklet在元素上触发鼠标单击
- 如何在保留鼠标/元素坐标访问权限的同时将鼠标移动更改为 setInterval