內帆布

使用手風琴當我們用手風琴，我們稱之爲使用一個div內帆布

<div id="accordion">

我想做使用canvas元素裏面手風琴裏面的ID。 Canvas標籤已經調用了它的ID，我不知道如何解決這個問題。

主要目的是在左側有一個區域，圖像分爲三個部分，將放在手風琴內部。在右側，我在另一個畫布元素內繪製了一個網格。這是圖像將被丟棄的地方。這裏是代碼，我停在這裏，我不知道什麼原因jsfiddle只顯示一個畫布，雖然網格圖是正確的。我爲我的錯誤代碼道歉。

http://jsfiddle.net/uS4er/4/

來源

2014-03-06 Sahar Ch.

爲什麼你想要把一個div canvas元素裏面？如果將HTML呈現在畫布上，您將失去任何交互功能。 https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas – Mathias

我不是那個意思，我想我不清楚，對不起。我想要做的就是將手風琴放在畫布內。 –

您可以將當前的代碼添加到問題中並說明您想實現的目標嗎？ – Mathias

jQueryUI的手風琴wiget將不是HTML畫布內操作。

備用計劃：

你可以創建你的外面，離開了畫布圖像源手風琴。

然後使用jQuery可拖動加畫布作爲拖放區，從工具箱複製圖像並在畫布上繪製。

此鏈接顯示如何使用jQueryUI的可拖動到畫布上的「滴」的img元素：

Drag controls from container and drop/draw them on canvas

來源

2014-03-06 18:37:25 markE

這就是我一直在尋找的東西。現在很好。非常感謝:-) –

我可以在手風琴的各個部分畫畫布嗎（因爲我需要用EaselJS來操作圖像）？ –

我不確定你在問什麼，但是，你可以把帆布放在手風琴裏面。然後，您可以使用這些圖像畫布代替img元素作爲主網格畫布的來源。例如，如果canvasImg1的id爲手風琴中的canvas元素，則可以在主網格畫布上繪製該畫布圖像，如下所示：var cImg1 = document.getElementById（「canvasImg1」）; mainContext.drawImage（cImg1,100,100）; – markE

不知道這是否是你想要的結果，但是這會<canvas>元素，或畫布上的任何其他內容呈現<div id="accordion">。基於http://jsfiddle.net/L93gA/

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" + 
      "<foreignObject width='100%' height='100%'>" + 
    "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size: 12px;' id='accordion'>" + 
       "Content of accordion" + 
       "</div>" + 
      "</foreignObject>" + 
      "</svg>"; 
var DOMURL = self.URL || self.webkitURL || self; 
var img = new Image(); 
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); 
var url = DOMURL.createObjectURL(svg); 
img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    DOMURL.revokeObjectURL(url); 
}; 
img.src = url;

在例如在https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

來源

2014-03-06 13:34:43 Mathias

我應該在「手風琴的內容」中加入什麼？我試着放我的數據，但它只是格式化文本，沒有手風琴功能。 –

我很確定我不知道你想做什麼。你想把一個畫布放在一個div裏面，你可以像手風琴一樣摺疊/最小化以隱藏畫布嗎？ – Mathias

我有兩個畫布元素：第一個畫布元素，我需要有一個三部分（構建，設備和傳感器）的手風琴，在每個部分將有圖像拖到第二個畫布。這第二個畫布是一個大網格。這是可行的嗎？ –

回答

相關問題