当图片被拖放时，如何在画布上提取图片的ids？
我有一个有限状态机绘图工具，正如你所看到的，我为不同的图像(即:状态和箭头)进行了拖放，并且为每个箭头创建了一个div标签来进行转换。每个状态、箭头和转换字母表都有一个id。
当我按下像保存这样的按钮时，如何提取画布中存在的所有图像的in？不幸的是，我不能保存画布的图像，所以我需要有人找出画布中的所有图像，并将这些信息保存在一个数组或其他东西中，这样我就可以在后端进行一些处理。
回答 2
Stack Overflow用户
发布于 2018-06-19 23:59:27
你需要在某个地方处理实际的状态，不要试图找回渲染的结果，这将是非常困难的。
Stack Overflow用户
发布于 2018-06-20 00:30:46
简而言之:你不能
在画布上绘制的所有内容都不能被“提取”，就像使用appendChild()将DOM从一个地方移到另一个地方一样。因此，您可以做的唯一一件事就是在相应元素上的拖动事件被触发时存储元素id，然后在单击保存按钮时获取所有存储的id。
编辑
为了能够检索和维护元素id，必须为输入顺序实现一个undo按钮和validation。您在画布上绘制的每个符号都将被导出到一个图像中，因此您可以检索单个符号的id。其他绘图工具应该仅用于突出显示画布的重要部分的，并且不应影响有限状态元素(这意味着您将使用不同的画布元素)。
下面是一个例子：
<div id='input'>
<button id='state'>State</button>
<button id='transition' disabled>Transition</button>
<button id='undo' disabled>Undo</button>
<span id='info'></span>
</div>
<div id='canvas-container'>
<canvas id='fsm' width='400' height='200'></canvas>
<canvas id='preview' width='400' height='200'></canvas>
</div>
<hr/>
<div>History : <span id='history'></span></div>
<div id='limbo'>
<!-- temporary canvas to get FSM symbol -->
<canvas id='canvasLimbo' width='50' height='50'></canvas>
</div>https://stackoverflow.com/questions/50932434
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号