使用 Pixastic 插件后画布监听器不起作用答案

【问题标题】：Canvas listener don't work after using Pixastic plugin使用 Pixastic 插件后画布监听器不起作用
【发布时间】：2012-06-19 01:10:40
【问题描述】：

我在 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>

我使用的听众是mousedown、mouseup、mousemove。有人可以帮助我吗？

【问题讨论】：

在某些情况下，Pixastic 会替换画布以显示其结果。你确定它仍然是你的画布吗？我会尝试直接在 html 代码中添加一个多余的属性，例如 test="imhere"。

标签： javascript jquery jquery-plugins html5-canvas pixastic

【解决方案1】：

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

);

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

【讨论】：

【解决方案2】：

在我的 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，因为在发布此内容时网站已关闭。

【讨论】：