拉斐爾Paper.setSize問題

您好，感謝你在爲你的援助。我一整天都對着鍵盤敲着腦袋，需要一些幫助。我是相當新的JavaScript和拉斐爾所以希望它是不是顯而易見的 - 但我已經花了很多時間好對付谷歌搜索，檢查文檔，並搜索這個網站的答案無濟於事。拉斐爾Paper.setSize問題

我的工作，需要的元素可拖動防空火炮在幾乎相同的方式在畫布作爲例子發佈到拉斐爾主頁的項目：http://raphaeljs.com/graffle.html 我就擁有了一切有一個例外完美的工作 - 當用戶重新調整瀏覽器窗口的大小，畫布大小並未相應更新。相反，儘管畫布能夠正確報告新尺寸（通過輸出到控制檯），但我無法將任何元素拖過畫布原始x/y邊界。

這裏是代碼中的相關片段：

CSS：

#canvas_container { 
background-color: #696969; 
    color: #FFFFFF; 
    padding: 15px 25px; 
    shadow: 1px 1px #FFFFFF; 
    margin-right: 310px; 
    margin-top: 75px; 
    min-width: 640px; 
    min-height: 640px; 
    border-radius: 20px; 
}

的JavaScript /拉斐爾：

 //initialize canvas 
    fiddle.paper = new Raphael(document.getElementById("canvas_container"), $('#canvas_container').width(), $('#canvas_container').height()); 

    //resize handler 
    $(window).resize(function() { 
     if(this.resizeTO) clearTimeout(this.resizeTO); 
     this.resizeTO = setTimeout(function() {$(this).trigger('resizeEnd');}, 300);    
    }); 

    $(window).bind('resizeEnd', function() { 
    //resize canvas 
    fiddle.paper.setSize($('#canvas_container').width(), $('#canvas_container').height()); 

    });

到底什麼我錯過？

來源

2013-04-21 David Holiday

第一關 - 感謝那些誰回答！與你們互動幫助我弄清楚發生了什麼事。

原來，問題不是拉斐爾畫布可言，但該插件我使用來處理拖/放（Raphael.FreeTransform）。與本地Raphael拖放處理程序不同，FreeTransform設置邊界以防止用戶將對象拖出畫布。默認邊界設置爲畫布邊界。當您通過paper.setSize（）調整畫布大小時，插件不會更新邊界，除非您通過the boundary option明確告知您。這是工作調整代碼如下所示：

 //resize handler 
    $(window).resize(function() { 
     if(this.resizeTO) clearTimeout(this.resizeTO); 
     this.resizeTO = setTimeout(function() {$(this).trigger('resizeEnd');}, 300); 


    }); 

    $(window).bind('resizeEnd', function() { 
    //resize canvas 
     fiddle.paper.setSize($('#canvas_container').width(), $('#canvas_container').height()); 

     for (var i = 0; i < fiddle.ftArray.length; i ++) { 
      fiddle.ftArray[i].setOpts({boundary: {x: 0, y: 0, width: $('#canvas_container').width(), height: $('#canvas_container').height() }}); 

     } 


    });

（ftArray是在窗口創建負載FreeTransform對象的數組）

來源

2013-04-21 21:28:39

既然你說你的$(#canvas_container)尺寸正確登錄時，setSize調用應該工作。

你可以用我的工作jsfiddle比較。你會特別關心你可能做出的任何呼叫，這意味着對視口邊界有一些限制。如果你有這些約束上，你將不得不更新您的視框中自己造成拉斐爾在setSize做出被稱爲視框中的更新並不總是完全一致。

來源

2013-04-21 09:22:34 lib3d

我不是擺弄setViewBox。我也可能應該提到我使用raphael.free_transform插件來處理拖放的東西。我可以從你的jsfiddle中看到，當用戶重新調整窗口的大小時，用戶可見的邊界似乎正在更新。但是，我想知道在這一點上畫布是否真的被切掉了，或者如果你的動畫盒子旋轉着關於用戶看不見的東西。動畫的延遲讓我覺得這可能是如此。我正在製作一個「分叉」小提琴來演示 - 將在tic中發佈。 – 2013-04-21 09:59:07

我做了一個小提琴，但它沒有表現出與我的項目相同的行爲，我開始懷疑罪魁禍首是raphael。free_transform插件 - 我正在使用它來處理拖動。在小提琴中，我使用了Raphael內置的拖拽處理程序，該處理程序允許用戶將元素從畫布上拖出 - 使其無法恢復。在我使用插件的項目中，元素位置受畫布限制，用戶無法將其拖出界限。這是沒有被paper.setSize更新的邊界。這裏是小提琴： http://jsfiddle.net/gHJJ6/24/ – 2013-04-21 10:34:11

要麼你找到一種方式來告訴插件新的牆壁，或者你自己使用本地拖動和計算牆。它可能是非常無代價的，因爲它可以在dragstart上計算一次。對於翻譯，您只需計算dx和dy邊界，從而計算4個浮點數。 – lib3d 2013-04-21 10:45:18

如果您不需要爲IE7-8支持，然後自動調整大小可以很簡單：

fiddle.paper = new Raphael("canvas_container", '100%','100%');

來源

2013-04-21 09:29:18 oyatek

我已經嘗試過這種解決方案，但它允許用戶將元素從畫布上拖下來，並將它們拖放到無法檢索到的區域（在raphaeljs網站上的草圖示例中也可以） – 2013-04-21 09:56:18

拉斐爾Paper.setSize問題

回答

相關問題