画布侦听器在使用 Pixastic 插件后不起作用

Canvas listener don't work after using Pixastic plugin

本文关键字:Pixastic 插件 不起作用 侦听器      更新时间:2023-09-26

我在Pixastic和我的画布听众之间有一个奇怪的冲突。

当我在画布上使用 Pixastic 函数时,此操作后画布的侦听器不起作用。我使用 Pixastic 插件分析了我的画布,发现 pixastic 添加了一些属性,例如 tabindex(我认为这些属性与听众冲突)。

这是我之前和之后的画布:

//Before
<canvas id="mycanvas" width="727" height="600" style="border: 1px solid black; left: 36.5px; top: 21px;"></canvas>
//After
<canvas id="mycanvas" class="" width="600" height="727" style="border: 1px solid black; left: 36.5px; top: 21px;" title="" tabindex="-1"></canvas>

我使用的侦听器是mousedownmouseupmousemove。有人可以帮助我吗?

Pixastic.process(canvas, 'brightness',
{
    'brightness': 60,
    'contrast': 0.5,
    'leaveDOM': true
},
function(img) {
    ctx.drawImage(img, 0, 0);
}

);

检查 leaveDOM 参数,它可能会有所帮助。

在我的Pixastic版本(0.1.3)中,有一个参数允许您设置目标画布

试试这个

var canvas = document.querySelector('#my_canvas');
// Since you specify what canvas the result should be rendered to,
// no replacing is occured
Pixastic.process(canvas, 'brightness',{'resultCanvas': canvas}); 
console.log(canvas === document.querySelector('#my_canvas')); // Should be true

不幸的是,我无法检查最新版本的Pixastic,因为该网站在发布此内容时已关闭。