jQuery wScratchPad：响应式设计？

Question

我已将wScratchPad添加到网站项目。它正在工作。

但是该项目是基于响应式设计。这意味着所有元素的大小都适应屏幕大小，因此它也针对移动设备进行了优化。

这种情况是，无论您制作浏览器窗口有多小，刮擦区域的大小都保持不变。

<div id="wScratchPad"></div>  
<script type="text/javascript"> 
     var scratch = function(e, percent){ 
      if (percent > 50) { 
       sp.wScratchPad('clear'); 
      } 
     } 

     var sp = $("#wScratchPad").wScratchPad({ 
      width   : 363, 
      height   : 117, 
      realtimePercent : true, 
      scratchDown: scratch, 
      scratchMove: scratch, 
      cursor:'./cursors/coin.png', 
      scratchUp: scratch, 
      image: './images/1.png', 
      image2: './images/2.png' 
     }); 
    </script> 

需要“宽度”和“高度”来计算覆盖画布和用于揭开背景图像的像素。

有什么办法让刮擦区域大小适应窗口大小？

Answer 1

您可以尝试的一种解决方案是使用document.documentElement.clientWidth/clientHeight将便笺簿的尺寸设置为浏览器视口尺寸的百分比。例如：

var sp = $("#wScratchPad").wScratchPad({ 
    width   : document.documentElement.clientWidth/4, 
    height   : document.documentElement.clientHeight/4, 
    ... 
    });