拖放图像时如何提取画布上图像的ID？

Question

I have a finite state machine drawing tool and as you can see I have drag and drop for the different images( ie: states and arrows) and for every arrow a div tag is getting created for the transition. Every state, arrow and transition alphabet has an id.

How can I extract the ids of all images that are present in the canvas when I press a button like save? Unfortunately, I can't save the image of the canvas so I need to someone figure out what all images are there in the canvas and save that information in an array or something upon which I could do some processing on the back end.

Answer 1

您需要将实际状态弄糟，不要试图找回渲染结果，这将变得更加困难。

Answer 2

Short answer : You can't

Everything you draw on canvas cannot be "extracted" like moving DOM from one to another using appendChild(). So the only thing you can do is store the elements id when the drag event on the correspondent element is triggered, and then get all the stored ids when you click the save button.

---

EDIT

To be able retrieving and maintaining the elements id, you must implement an undo button and validation for input order. Every symbol that you draw on canvas will be exported into an image, hence you can then retrieve the id of individual symbol. The other drawing tools should be used only for highlighting important part of your canvas and shall not affect the finite state element (meaning you will use a different canvas element).

Here's an example :

<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>

Also, here's the fiddle : https://jsfiddle.net/tmpmachine/dn2p7zj5/172/