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：全屏帆布与过大的可拖动的图像

回答

相关问题