强制画布在弹性列中使用可用空间。

huangapple
go评论103阅读模式
英文:

Force a canvas to use available space in a flex column

问题

I have a full size page, containing a top toolbar, and below, a container with 2 columns:

  • a right column
  • a left column containing a canvas (centered horizontally and vertically in this column), which has its own coordinates system (typically 4000 x 3000) and should preserve this aspect ratio. This canvas has a "+" button layered on it. (In my real code, there are several canvas for multiple layers, and multiple buttons, but not important here)

这里几乎可以工作，但我无法使画布占据左列中的全部可用空间。

通过我尝试的所有方法（max-width: 100%，max-height: 100%），无论是在浏览器中缩放（70%、80%...150%）还是因所使用的方法导致按钮无法保持在画布的右上角而失败。

TL;DR: 如何使这个画布在左列中占据所有可用空间，保持其纵横比，保持分层按钮，而不溢出？

注意：我正在寻找一个CSS解决方案，JS不是用于定位，而只用于绘制。


  1. ctx = document.querySelector("canvas").getContext("2d");
  2. ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 1000, 1000);
  3. ctx.fillStyle = "#00FF00"; ctx.fillRect(1000, 1000, 1000, 1000);
  4. ctx.fillStyle = "#0000FF"; ctx.fillRect(2000, 2000, 1000, 1000);
  5. ctx.fillStyle = "#000000"; ctx.fillRect(3000, 0, 1000, 1000);

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4. }
  6. .page {
  7.   display: flex;
  8.   flex-direction: column;
  9.   height: 100vh;
  10. }
  12. .toolbar {
  13.   background-color: yellow;
  14.   flex: 0 0 5em;
  15. }
  17. .container {
  18.   background-color: orange;
  19.   flex: 1 0 0;
  20.   display: flex;
  21. }
  23. .left {
  24.   background-color: magenta;
  25.   flex: 1 0 0;
  26.   display: flex;
  27.   align-items: center;
  28.   justify-content: center;
  29. }
  31. .right {
  32.   background-color: salmon;
  33.   flex: 0 0 10em;
  34. }
  36. .canvas-wrapper {
  37.   background-color: grey;
  38.   display: flex;
  39.   position: relative;
  40. }
  42. canvas {
  43.   height: 100px;
  44.   background-color: white;
  45. }
  47. .button {
  48.   background-color: yellow;
  49.   position: absolute;
  50.   top: 0;
  51.   right: 0;
  52.   width: 1em;
  53.   height: 1em;
  54. }

  1. <div class="page">
  2.   <div class="toolbar">
  3.     TOOLBAR OF HEIGHT 5 EM
  4.   </div>
  5.   <div class="container">
  6.     <div class="left">
  7.       <div class="canvas-wrapper">
  8.         <canvas width="4000" height="3000"></canvas>
  9.         <div class="button">+</div>
  10.       </div>
  11.     </div>
  12.     <div class="right">
  13.       RIGHT OF WIDTH 10 EM
  14.     </div>
  15.   </div>
  16. </div>

  1. PS: 你必须在“全屏”中打开片段，以查看浏览器的缩放功能（CTRL +，CTRL -）。
  3. <details>
  4. <summary>英文:</summary>
  6. I have a full size page, containing a top toolbar, and below, a  container with 2 columns:
  8. - a right column 
  9. - a left column containing a canvas (centered horizontally and vertically in this column), which has its own coordinates system (typically 4000 x 3000) and should preserve this aspect ratio. This canvas has a &quot;+&quot; button layered on it. (In my real code, there are several canvas for multiple layers, and multiple buttons, but not important here)
  11. [![enter image description here][1]][1]
  13. Here it *nearly* works, but I can&#39;t  make the canvas occupy the full available space in the left column. 
  15. With all methods that I tried (`max-width: 100%`, `max-height: 100%`), either it fails when we zoom in / out in the browser (70% 80% ... 150 %), or it fails because the method used prevents the button to stay on top of the canvas, at its right corner.
  17. **TL;DR: how to make this canvas take all available space in the left column, keeping its aspect ratio, keeping the layered buttons, without overflow?**
  19. Note: I&#39;m looking for a CSS solution, the JS is not for the positioning, but only the drawing.
  21. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  23. &lt;!-- language: lang-js --&gt;
  25.     ctx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);
  26.     ctx.fillStyle = &quot;#FF0000&quot;; ctx.fillRect(0, 0, 1000, 1000);
  27.     ctx.fillStyle = &quot;#00FF00&quot;; ctx.fillRect(1000, 1000, 1000, 1000);
  28.     ctx.fillStyle = &quot;#0000FF&quot;; ctx.fillRect(2000, 2000, 1000, 1000);
  29.     ctx.fillStyle = &quot;#000000&quot;; ctx.fillRect(3000, 0, 1000, 1000);
  31. &lt;!-- language: lang-css --&gt;
  33.     * {
  34.       padding: 0;
  35.       margin: 0;
  36.     }
  38.     .page {
  39.       display: flex;
  40.       flex-direction: column;
  41.       height: 100vh;
  42.     }
  44.     .toolbar {
  45.       background-color: yellow;
  46.       flex: 0 0 5em;
  47.     }
  49.     .container {
  50.       background-color: orange;
  51.       flex: 1 0 0;
  52.       display: flex;
  53.     }
  55.     .left {
  56.       background-color: magenta;
  57.       flex: 1 0 0;
  58.       display: flex;
  59.       align-items: center;
  60.       justify-content: center;
  61.     }
  63.     .right {
  64.       background-color: salmon;
  65.       flex: 0 0 10em;
  66.     }
  68.     .canvas-wrapper {
  69.       background-color: grey;
  70.       display: flex;
  71.       position: relative;
  72.     }
  74.     canvas {
  75.       height: 100px;
  76.       background-color: white;
  77.     }
  79.     .button {
  80.       background-color: yellow;
  81.       position: absolute;
  82.       top: 0;
  83.       right: 0;
  84.       width: 1em;
  85.       height: 1em;
  86.     }
  88. &lt;!-- language: lang-html --&gt;
  90.     &lt;div class=&quot;page&quot;&gt;
  91.       &lt;div class=&quot;toolbar&quot;&gt;
  92.         TOOLBAR OF HEIGHT 5 EM
  93.       &lt;/div&gt;
  94.       &lt;div class=&quot;container&quot;&gt;
  95.         &lt;div class=&quot;left&quot;&gt;
  96.           &lt;div class=&quot;canvas-wrapper&quot;&gt;
  97.             &lt;canvas width=&quot;4000&quot; height=&quot;3000&quot;&gt;&lt;/canvas&gt;
  98.             &lt;div class=&quot;button&quot;&gt;+&lt;/div&gt;
  99.           &lt;/div&gt;
  100.         &lt;/div&gt;
  101.         &lt;div class=&quot;right&quot;&gt;
  102.           RIGHT OF WIDTH 10 EM
  103.         &lt;/div&gt;
  104.       &lt;/div&gt;
  105.     &lt;/div&gt;
  107. &lt;!-- end snippet --&gt;
  109. PS: you have to open the snippet in &quot;Full page&quot; to see the browser zoom in / zoom out feature (CTRL + , CTRL -).
  112.   [1]: https://i.stack.imgur.com/gXckTm.png
  114. </details>
  117. # 答案1
  118. **得分**: 2
  120. 你需要更改一些对齐方式，`width`，`height`，`flex-grow`，并添加一个HTML包装器（即`&lt;div class=&quot;canvas-wrapper-inner&quot;&gt;`）。
  122. 请参见下面的代码片段。
  124. ```html
  125. <div class="page">
  126.   <div class="toolbar">
  127.     TOOLBAR OF HEIGHT 5 EM
  128.   </div>
  129.   <div class="container">
  130.     <div class="left">
  131.       <div class="canvas-wrapper">
  132.         <div class="canvas-wrapper-inner">
  133.           <canvas width="4000" height="3000"></canvas>
  134.           <div class="button">+</div>
  135.         </div>
  136.       </div>
  137.     </div>
  138.     <div class="right">
  139.       RIGHT OF WIDTH 10 EM
  140.     </div>
  141.   </div>
  142. </div>
英文:

You need to change some alignments, widths, heights, flex-grows and add an HTML wrapper (i.e., &lt;div class=&quot;canvas-wrapper-inner&quot;&gt;).

See the snippet below.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. ctx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);
  2. ctx.fillStyle = &quot;#FF0000&quot;;
  3. ctx.fillRect(0, 0, 1000, 1000);
  4. ctx.fillStyle = &quot;#00FF00&quot;;
  5. ctx.fillRect(1000, 1000, 1000, 1000);
  6. ctx.fillStyle = &quot;#0000FF&quot;;
  7. ctx.fillRect(2000, 2000, 1000, 1000);
  8. ctx.fillStyle = &quot;#000000&quot;;
  9. ctx.fillRect(3000, 0, 1000, 1000);

<!-- language: lang-css -->

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4. }
  6. .page {
  7.   display: flex;
  8.   flex-direction: column;
  9.   height: 100vh;
  10. }
  12. .toolbar {
  13.   background-color: yellow;
  14.   flex: 0 0 5em;
  15. }
  17. .container {
  18.   background-color: orange;
  19.   flex: 1 0 0;
  20.   display: flex;
  21. }
  23. .left {
  24.   background-color: magenta;
  25.   flex: 1 0 0;
  26.   display: flex;
  27.   align-items: center;
  28.   justify-content: center;
  29. }
  31. .right {
  32.   background-color: salmon;
  33.   flex: 0 0 10em;
  34. }
  36. .canvas-wrapper {
  37.   background-color: grey;
  38.   display: flex;
  39.   position: relative;
  40.   flex-grow: 1; /* Added */
  41.   align-self: stretch; /* Added */
  42.   align-items: center; /* Added */
  43.   justify-content: center; /* Added */
  44. }
  46. canvas {
  47.   width: 100%; /* Added */
  48.   flex-grow: 1; /* Added */
  49.   object-fit: contain; /* Added */
  50.   max-height: calc(100vh - 5em); /* Added */
  51. }
  53. .button {
  54.   background-color: yellow;
  55.   position: absolute;
  56.   top: 0;
  57.   right: 0;
  58.   width: 1em;
  59.   height: 1em;
  60. }
  62. /* Added */
  63. .canvas-wrapper-inner {
  64.   position: relative;
  65. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;page&quot;&gt;
  2.   &lt;div class=&quot;toolbar&quot;&gt;
  3.     TOOLBAR OF HEIGHT 5 EM
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;container&quot;&gt;
  6.     &lt;div class=&quot;left&quot;&gt;
  7.       &lt;div class=&quot;canvas-wrapper&quot;&gt;
  8.         &lt;div class=&quot;canvas-wrapper-inner&quot;&gt;
  9.           &lt;canvas width=&quot;4000&quot; height=&quot;3000&quot;&gt;&lt;/canvas&gt;
  10.           &lt;div class=&quot;button&quot;&gt;+&lt;/div&gt;
  11.         &lt;/div&gt;
  12.       &lt;/div&gt;
  13.     &lt;/div&gt;
  14.     &lt;div class=&quot;right&quot;&gt;
  15.       RIGHT OF WIDTH 10 EM
  16.     &lt;/div&gt;
  17.   &lt;/div&gt;
  18. &lt;/div&gt;

<!-- end snippet -->

答案2

得分: 1

There's a handy unit size called cqmin which is the lowest size of the inline or block sizes. Set container wrapper as a container of type size so the content responds to both block and inline dimensions then set the width of the canvas to 100cqmin. Use aspect-ratio to maintain the, er, aspect ratio. See example below. I've put a codepen of it here too.

  1. ctx = document.querySelector("canvas").getContext("2d");
  2. ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 1000, 1000);
  3. ctx.fillStyle = "#00FF00"; ctx.fillRect(1000, 1000, 1000, 1000);
  4. ctx.fillStyle = "#0000FF"; ctx.fillRect(2000, 2000, 1000, 1000);
  5. ctx.fillStyle = "#000000"; ctx.fillRect(3000, 0, 1000, 1000);
  7. * {
  8.   padding: 0;
  9.   margin: 0;
  10. }
  12. .page {
  13.   display: flex;
  14.   flex-direction: column;
  15.   height: 100vh;
  16. }
  18. .toolbar {
  19.   background-color: yellow;
  20.   flex: 0 0 5em;
  21. }
  23. .container {
  24.   background-color: orange;
  25.   flex: 1 0 0;
  26.   display: flex;
  27. }
  29. .left {
  30.   container-type: size;
  31.   background-color: magenta;
  32.   flex: 1 0 0;
  33.   display: flex;
  34.   align-items: center;
  35.   justify-content: center;
  36. }
  38. .right {
  39.   background-color: salmon;
  40.   flex: 0 0 10em;
  41. }
  43. .canvas-wrapper {
  44.   position: relative;
  45.   width: 100cqmin;
  46. }
  48. .button {
  49.   background-color: yellow;
  50.   position: absolute;
  51.   top: 0;
  52.   right: 0;
  53.   width: 1em;
  54.   height: 1em;
  55. }
  57. canvas {
  58.   width: 100%;
  59.   aspect-ratio: 4/3;
  60.   background-color: white;
  61. }
TOOLBAR OF HEIGHT 5 EM

+

RIGHT OF WIDTH 10 EM

英文:

There's a handy unit size called cqmin which is the lowest size of the inline or block sizes. Set container wrapper as a container of type size so the content responds to both block and inline dimesions then set the width of the canvas to 100cqmin. Use aspect-ratio to maintain the, er, aspect ratio. See example below. I've put a codepen of it here too.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. ctx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);
  2. ctx.fillStyle = &quot;#FF0000&quot;; ctx.fillRect(0, 0, 1000, 1000);
  3. ctx.fillStyle = &quot;#00FF00&quot;; ctx.fillRect(1000, 1000, 1000, 1000);
  4. ctx.fillStyle = &quot;#0000FF&quot;; ctx.fillRect(2000, 2000, 1000, 1000);
  5. ctx.fillStyle = &quot;#000000&quot;; ctx.fillRect(3000, 0, 1000, 1000);

<!-- language: lang-css -->

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4. }
  6. .page {
  7.   display: flex;
  8.   flex-direction: column;
  9.   height: 100vh;
  10. }
  12. .toolbar {
  13.   background-color: yellow;
  14.   flex: 0 0 5em;
  15. }
  17. .container {
  18.   background-color: orange;
  19.   flex: 1 0 0;
  20.   display: flex;
  21. }
  23. .left {
  24.   container-type: size;
  25.   background-color: magenta;
  26.   flex: 1 0 0;
  27.   display: flex;
  28.   align-items: center;
  29.   justify-content: center;
  30. }
  32. .right {
  33.   background-color: salmon;
  34.   flex: 0 0 10em;
  35. }
  37. .canvas-wrapper {
  38.   position: relative;
  39.   width: 100cqmin;
  40. }
  42. .button {
  43.   background-color: yellow;
  44.   position: absolute;
  45.   top: 0;
  46.   right: 0;
  47.   width: 1em;
  48.   height: 1em;
  49. }
  51. canvas {
  52.   width: 100%;
  53.   aspect-ratio: 4/3;
  54.   background-color: white;
  55. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;page&quot;&gt;
  2.   &lt;div class=&quot;toolbar&quot;&gt;
  3.     TOOLBAR OF HEIGHT 5 EM
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;container&quot;&gt;
  6.     &lt;div class=&quot;left&quot;&gt;
  7.       &lt;div class=&quot;canvas-wrapper&quot;&gt;
  8.         &lt;canvas width=&quot;4000&quot; height=&quot;3000&quot;&gt;&lt;/canvas&gt;
  9.         &lt;div class=&quot;button&quot;&gt;+&lt;/div&gt;
  10.       &lt;/div&gt;
  11.     &lt;/div&gt;
  12.     &lt;div class=&quot;right&quot;&gt;
  13.       RIGHT OF WIDTH 10 EM
  14.     &lt;/div&gt;
  15.   &lt;/div&gt;
  16. &lt;/div&gt;

<!-- end snippet -->

答案3

得分: 1

The canvas-wrapper 需要与画布具有相同的大小和位置，但画布的大小和位置基于其父级。一个简单的解决方案是将画布的尺寸复制为其父级的 aspect-ratio：

  1. <div class="canvas-wrapper" style="aspect-ratio: 4000 / 3000;">
  2.   <canvas width="4000" height="3000"></canvas>
  3.   <div class="button">+</div>
  4. </div>

请注意，这是一段HTML代码，用于描述如何设置canvas-wrapper元素的尺寸和位置以适应画布。

英文:

The canvas-wrapper needs to have same size and position as the canvas, but the size and position of the canvas is based on its grand parent. A simple solution is to copy the canvas dimensions as aspect-ratio to its parent:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

  1. ctx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);
  2. ctx.fillStyle = &quot;#FF0000&quot;;
  3. ctx.fillRect(0, 0, 1000, 1000);
  4. ctx.fillStyle = &quot;#00FF00&quot;;
  5. ctx.fillRect(1000, 1000, 1000, 1000);
  6. ctx.fillStyle = &quot;#0000FF&quot;;
  7. ctx.fillRect(2000, 2000, 1000, 1000);
  8. ctx.fillStyle = &quot;#000000&quot;;
  9. ctx.fillRect(3000, 0, 1000, 1000);

<!-- language: lang-css -->

  1. body {
  2.   margin: 0;
  3. }
  5. .page {
  6.   height: 100vh;
  7.   display: flex;
  8.   flex-direction: column;
  9. }
  11. .toolbar {
  12.   background-color: yellow;
  13.   flex: 0 0 5em;
  14. }
  16. .container {
  17.   background-color: orange;
  18.   flex: 1 1 auto;
  19.   /* wrapper for two column layout */
  20.   display: flex;
  21.   flex-direction: row;
  22. }
  24. .left {
  25.   background-color: magenta;
  26.   flex: 1 1 auto;
  27.   /* reference element for size and position */
  28.   position: relative;
  29. }
  31. .right {
  32.   background-color: salmon;
  33.   flex: 0 0 10em;
  34.   align-self: center;
  35. }
  37. .canvas-wrapper {
  38.   background-color: gray;
  39.   position: absolute;
  40.   left: 0;
  41.   right: 0;
  42.   top: 0;
  43.   bottom: 0;
  44.   margin: auto;
  45.   max-width: 100%;
  46.   max-height: 100%;
  47. }
  49. canvas {
  50.   display: block;
  51.   width: 100%;
  52.   height: 100%;
  53. }
  55. .button {
  56.   background-color: cyan;
  57.   position: absolute;
  58.   top: 0;
  59.   right: 0;
  60.   padding: .5em;
  61. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;page&quot;&gt;
  2.   &lt;div class=&quot;toolbar&quot;&gt;
  3.     TOOLBAR OF HEIGHT 5 EM
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;container&quot;&gt;
  6.     &lt;div class=&quot;left&quot;&gt;
  7.       &lt;div class=&quot;canvas-wrapper&quot; style=&quot;aspect-ratio: 4000 / 3000;&quot;&gt;
  8.         &lt;canvas width=&quot;4000&quot; height=&quot;3000&quot;&gt;&lt;/canvas&gt;
  9.         &lt;div class=&quot;button&quot;&gt;+&lt;/div&gt;
  10.       &lt;/div&gt;
  11.     &lt;/div&gt;
  12.     &lt;div class=&quot;right&quot;&gt;
  13.       RIGHT OF WIDTH 10 EM
  14.     &lt;/div&gt;
  15.   &lt;/div&gt;
  16. &lt;/div&gt;

<!-- end snippet -->

答案4

得分: 1

这是基于RokBenko的回答的答案，似乎可以工作，无需使用第二个包装和第二个flex：

  1. <div class="page">
  2.   <div class="toolbar">
  3.     TOOLBAR OF HEIGHT 5 EM
  4.   </div>
  5.   <div class="container">
  6.     <div class="left">
  7.       <div class="canvas-wrapper">
  8.         <canvas width="4000" height="3000"></canvas>
  9.         <div class="button">+</div>
  10.       </div>
  11.     </div>
  12.     <div class="right">
  13.       RIGHT OF WIDTH 10 EM
  14.     </div>
  15.   </div>
  16. </div>
英文:

Here is an answer based on RokBenko's answer which seems to work, without the secondary wrapper and the secondary flex:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. ctx = document.querySelector(&quot;canvas&quot;).getContext(&quot;2d&quot;);
  2. ctx.fillStyle = &quot;#FF0000&quot;;
  3. ctx.fillRect(0, 0, 1000, 1000);
  4. ctx.fillStyle = &quot;#00FF00&quot;;
  5. ctx.fillRect(1000, 1000, 1000, 1000);
  6. ctx.fillStyle = &quot;#0000FF&quot;;
  7. ctx.fillRect(2000, 2000, 1000, 1000);
  8. ctx.fillStyle = &quot;#000000&quot;;
  9. ctx.fillRect(3000, 0, 1000, 1000);

<!-- language: lang-css -->

  1. * {
  2.   padding: 0;
  3.   margin: 0;
  4. }
  6. .page {
  7.   display: flex;
  8.   flex-direction: column;
  9.   height: 100vh;
  10. }
  12. .toolbar {
  13.   background-color: yellow;
  14.   flex: 0 0 5em;
  15. }
  17. .container {
  18.   background-color: orange;
  19.   flex: 1 0 0;
  20.   display: flex;
  21. }
  23. .left {
  24.   background-color: magenta;
  25.   flex: 1 0 0;
  26.   display: flex;
  27.   align-items: center;
  28.   justify-content: center;
  29. }
  31. .right {
  32.   background-color: salmon;
  33.   flex: 0 0 10em;
  34. }
  36. .canvas-wrapper {
  37.   background-color: #aaa;
  38.   position: relative;
  39. }
  41. canvas {
  42.   background-color: white;
  43.   width: 100%;
  44.   max-height: calc(100vh - 5em);
  45. }
  47. .button {
  48.   background-color: yellow;
  49.   position: absolute;
  50.   top: 0;
  51.   right: 0;
  52.   width: 1em;
  53.   height: 1em;
  54. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;page&quot;&gt;
  2.   &lt;div class=&quot;toolbar&quot;&gt;
  3.     TOOLBAR OF HEIGHT 5 EM
  4.   &lt;/div&gt;
  5.   &lt;div class=&quot;container&quot;&gt;
  6.     &lt;div class=&quot;left&quot;&gt;
  7.       &lt;div class=&quot;canvas-wrapper&quot;&gt;
  8.         &lt;canvas width=&quot;4000&quot; height=&quot;3000&quot;&gt;&lt;/canvas&gt;
  9.         &lt;div class=&quot;button&quot;&gt;+&lt;/div&gt;
  10.       &lt;/div&gt;
  11.     &lt;/div&gt;
  12.     &lt;div class=&quot;right&quot;&gt;
  13.       RIGHT OF WIDTH 10 EM
  14.     &lt;/div&gt;
  15.   &lt;/div&gt;
  16. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月10日 17:38:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/76216924.html
  • css
  • flexbox
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定