Image annotation: support more shapes

[damithc]

Currently, we can use image annotation features to do something like the below (i.e., the yellow circle) to indicate which area of the image the explanation refers to.

It may be useful to be able to draw other shapes in the diagram e.g., a box

[yucheng11122017]

Hi @damithc, was wondering if the custom annotations are sufficient for this purpose?
https://markbind.org/userGuide/components/imagesAndDiagrams.html#annotations:~:text=Customising%20shapes%20for%20Annotate%20Point

I had a quick stab at it and I managed to do this.

This is the code for that. The idea is to create a box using CSS and to use it as a slot for a-point

<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
  <a-point x="75%" y="50%" content="This point is 75% from the left and 50% from the top">
    <div style="width: 100px; height: 100px; border: 2px solid red; margin: 20px auto;"></div>
  </a-point>
  <a-point x="25%" y="50%" content="This point is 25% from the left and 50% from the top">
    <pic src="../../images/deer.jpg" width="50" height="50">
  </a-point>
  <!-- Customised Annotate Point with styling-->
  <a-point x="50%" y="50%" content="This point is 25% from the left and 50% from the top">
    <div style="opacity: 90%; color: red">Custom</div>
  </a-point>
</annotate>

[damithc]

Hi @damithc, was wondering if the custom annotations are sufficient for this purpose? https://markbind.org/userGuide/components/imagesAndDiagrams.html#annotations:~:text=Customising%20shapes%20for%20Annotate%20Point

I had a quick stab at it and I managed to do this.

This is the code for that. The idea is to create a box using CSS and to use it as a slot for a-point

<annotate src="../../images/annotateSampleImage.png" width="500" alt="Sample Image">
  <a-point x="75%" y="50%" content="This point is 75% from the left and 50% from the top">
    <div style="width: 100px; height: 100px; border: 2px solid red; margin: 20px auto;"></div>
  </a-point>
  <a-point x="25%" y="50%" content="This point is 25% from the left and 50% from the top">
    <pic src="../../images/deer.jpg" width="50" height="50">
  </a-point>
  <!-- Customised Annotate Point with styling-->
  <a-point x="50%" y="50%" content="This point is 25% from the left and 50% from the top">
    <div style="opacity: 90%; color: red">Custom</div>
  </a-point>
</annotate>

@yucheng11122017 Nice. While this is not user-friendly, most likely any syntax we introduce will be almost as complicated as this one.
That said, we should still update the user guide to include examples such as this one.