geometrical construction

[groupsvkg]

Hi Team,

Is it possible to do geometrical construction's on surface i.e line, square, triangle.....also is it possible to zoom in, zoom out and rotate these shapes?

Can you please share me codepen.

Regards, vishal

[jordanpapaleo]

Hi @groupsvkg -

Everything that you mentioned already exists. Check out these tutorials for CSS and svg.

Thanks,

Jordan

[groupsvkg]

Hi Jordan,

how can i develop an interface using famous-angular so that user can do geometrical constructions?

Regards, Vishal

[zackbrown]

Vishal,

You can use any standards-compliant HTML inside of Famo.us Surfaces. In Famo.us/Angular, you can create a Surface using the <fa-surface> directive.

Thus, inside of an <fa-surface>, you can include geometric constructions using CSS (easily, you can create rectilinear objects, lines, and triangles) or SVG (for curves, complex polygons, or anything else that breaks the mold of CSS.)

For example:

<fa-app style="height: 500px; width: 500px;">
  <fa-modifier> <!-- you can animate the position, scale, rotation, etc. on the Modifier -->
    <fa-surface fa-size="[true, true]">
      <svg viewBox="0 0 120 120" version="1.1"
  xmlns="http://www.w3.org/2000/svg">
        <circle cx="60" cy="60" r="50"/>
      </svg>
    <fa-surface>
  </fa-modifier>
</fa-app>

should create an SVG circle inside of a Famo.us Surface, which you can then position and transform using properties of the containing Modifier.

As @jordanpapaleo mentioned, there are several resources available on the web for using SVG and CSS, and this is beyond the scope of the support that we can offer for Famo.us/Angular.

Zack

[groupsvkg]

Thanks Zack for the reply

Regards, vishal