无法在多画布应用程序中执行选择

Question

我正在使用 Jquery 的 Fabric.js 和 HTML5 (Canvas) 开发一个应用程序，并且有 2 个画布。使用“显示”属性 (CSS) 我一次只显示一个画布。 第一个画布工作正常。但是当我显示第二个画布时，选择（在画布上拖动鼠标）被禁用。我无法在画布上选择任何对象，而且选择区域（通过拖动鼠标来）也没有绘制。

下面是我的代码sn-p：

HTML： <div id="divCanvas" style="overflow:scroll;width:665px; height:570px"> <canvas id="FrontCanvas"></canvas> <canvas id="BackCanvas"></canvas> </div>

Javascript： $("#btnRotate").click(function () { if ($("#c").parent().hasClass("visible")) { $("#c").parent().addClass("invisible").removeClass("visible"); $("#cb").parent().addClass("visible").removeClass("invisible"); } else { $("#c").parent().addClass("visible").removeClass("invisible"); $("#cb").parent().addClass("invisible").removeClass("visible"); } });

谢谢

Answer 1

得到答案........使用 calcOffset()

$("#btnRotate").click(function () { if ($("#c").parent().hasClass("visible")) { $("#c").parent().addClass("invisible").removeClass("visible"); $("#cb").parent().addClass("visible").removeClass("invisible"); } else { $("#c").parent().addClass("visible").removeClass("invisible"); $("#cb").parent().addClass("invisible").removeClass("visible"); } canvas.calcOffset(); canvasBack.calcOffset(); });