gpt4 book ai didi

javascript - 如何在 fabricjs canvas 对象上触发 mousedown 事件?

转载 作者:行者123 更新时间:2023-11-30 19:22:54 27 4
gpt4 key购买 nike

我在 Canvas fabricJs 上有一个图像对象,我想触发一个 mousedown(click) 事件。这是我尝试过的方法,但似乎没有达到预期的效果。

const canvas = new fabric.Canvas('gameCanvas', {selection: false});
let myImg;

fabric.Image.fromURL('http://placekitten.com/50/50', function(img)
{
myImg = img.set({
left: 50,
top: 50 ,
width:50,
height:50
});

canvas.add(myImg);

myImg.on('mousedown', function(e)
{
console.log('image click event was simulated at: ', e.clientX, e.clientY);

});

});

document.getElementById('triggerBtn').addEventListener('click', function()
{
canvas.trigger('mouse:down', {
objCanvas: myImg,
objCanvasX: myImg.left,
objCanvasY: myImg.top
});
});

canvas.on('mouse:down', function(e) {

if(e.objCanvas)
{

if(e.objCanvas.type === 'image')
{
e.objCanvas.trigger('mousedown', {
clientX: e.objCanvasX,
clientY: e.objCanvasY
});
}
}

else {
console.log('image was clicked');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>
<button id="triggerBtn">Trigger</button>

我找到了我的问题的解决方案,请引用更新后的代码片段

最佳答案

我的问题的解决方案在更新的代码段中

关于javascript - 如何在 fabricjs canvas 对象上触发 mousedown 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57260462/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com