内帆布

使用手风琴当我们用手风琴，我们称之为使用一个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

我有两个画布元素：第一个画布元素，我需要有一个三部分（构建，设备和传感器）的手风琴，在每个部分将有图像拖到第二个画布。这第二个画布是一个大网格。这是可行的吗？ –

回答

相关问题