JCanvas：全屏帆布與過大的可拖動的圖像

使用JCanvas，我想做兩兩件事：JCanvas：全屏帆布與過大的可拖動的圖像

動態根據屏幕的寬度和高度定義畫布的大小。
將大於屏幕的圖像繪製到畫布並使其可拖動，拖動停止在圖像的邊緣。

我有以下代碼：

function init() { 
    $canvas = $('#canvas'); 
    $canvas.width = window.innerWidth; 
    $canvas.height = window.innerHeight; 

    $canvas.drawImage({ 
     x: 0, 
     y: 0, 
     source: "../images/testimage.jpg", 
     draggable: true, 
     layer: true, 
    }).drawLayers(); 
}

不幸的是，瀏覽器僅示出了從圖像的中心的小部分（重量：300像素; H：150像素）在左上角。據我所知，這裏沒有涉及CSS。

我可以在小300像素x 150像素視口中拖動圖像。但是，我希望圖像的可見部分遍佈整個屏幕並拖動以停止屏幕的邊緣：任何空白都不可見。

我在做什麼錯？

來源

2016-11-29 kalabalik

嘗試

var canvas = document.getElementById('canvas'); 
canvas.width = innerWidth; 
canvas.height = innerHeight;

正如我永遠不能鍛鍊什麼jQuery的，因爲它是遠離明顯的看你的代碼。如果這樣的話，那麼你知道jQuery正在設置樣式的寬度和高度。對於畫布寬度和高度設置像素分辨率，而canvas.style.width高度設置顯示大小。

默認屏幕的分辨率爲canvas.width = 300和canvas.height = 150

來源

2016-11-30 00:14:03 Blindman67

工作！謝謝！所以，儘管我對畫布有jCanvas引用，但jCanvas不允許我設置畫布的屬性。你有一個線索，我將如何在圖像的邊緣進行拖動停止？我是否必須在拖動回調中追蹤圖像的位置？ – kalabalik

JCanvas：全屏帆布與過大的可拖動的圖像

回答

相關問題