Forma Elementum

Forma elementa sunt graphics vectoriales 2D quae possunt renderi ut rectangula, circuli, stellae, polygonum, vel itinera consueta.

Forma Extrusio ad 3D

Forma elementa in editori ad elementa 3D per extrusio converti possunt. Cum forma extruditur:

  • Novum elementum cum type: "3D" creatur
  • Originalis 2D formae parameters in campo extrusionSource servantur
  • Proprietates 3D-specificae additae profunditatem extrusae, beveling, et stilos angulorum moderantur

Pro singulis de formis extrusis, vide 3D Element documentationem.

Forma Proprietates

ProprietasTypusRequiriturExemplumAmbitus ValorisDescriptio
shapeTypestringtrue-SHAPE_RECT | SHAPE_ELLIPSE | SHAPE_STAR | SHAPE_POLYGON | SHAPE_PATHTypus formae elementi, ut rectangulum, circulus, vel polygonum.
fillstring | objecttrue#FFFFFF-Impletio formae. Potest esse stringa coloris hex (exempli gratia, "#FFFFFF") vel obiectum gradientis cum typus "linear" vel "radial", colorStops array, et coördinatae initii/finis. Editor etiam supports advanced dynamic fills (dynamicGradient, structureGradient, gridWave, dotWave) quae automatice generantur et non destinantur ad constructionem manualem.
strokestringfalse--Coloris linea formae, in formato hex.
strokeWidthnumberfalse->= 0Latitudo lineae applicatae formae, in pixelis.
keyframesarrayfalse--Array keyframes definientes status animationis et transitiones pro elemento formae.
viewobjecttrue--Impostationes visus pro elemento formae, inclusa positione, scala, et rotatione.
transformobjecttrue--Impostationes transformationis pro elemento formae, inclusa skew et alpha.
pathsarrayfalse--Array datae itineris pro elemento formae, usus cum shapeType est SHAPE_PATH.

Nota: SHAPE_RECT, SHAPE_ELLIPSE, SHAPE_STAR, et SHAPE_POLYGON sunt formae fundamentales, dum SHAPE_PATH ad formam itineris constructam per curvas Bézier refert.

Visus

ProprietasTypusRequiriturExemplumAmbitus ValorisDescriptio
xnumbertrue0>= 0Positio horizontalis elementi formae, in pixelis.
ynumbertrue0>= 0Positio verticalis elementi formae, in pixelis.
widthnumbertrue100>= 0Latitudo elementi formae, in pixelis.
heightnumbertrue100>= 0Altitudo elementi formae, in pixelis.
scaleXnumbertrue1> 0Factor scalae horizontalis elementi formae. Valor maior quam 1 elementum amplificat, dum valor inter 0 et 1 id contrahit.
scaleYnumbertrue1> 0Factor scalae verticalis elementi formae. Valor maior quam 1 elementum amplificat, dum valor inter 0 et 1 id contrahit.
rotationnumbertrue0>= 0Angulus rotationis elementi formae, in gradibus.

Transformare

ProprietasTypusRequiriturExemplumAmbitus ValorisDescriptio
xnumbertrue0>= 0Positio horizontalis elementi formae, in pixelis.
ynumbertrue0>= 0Positio verticalis elementi formae, in pixelis.
anchorXnumbertrue--Coordinata x puncti ancoram relativa ad elementum formae, in pixelis.
anchorYnumbertrue--Coordinata y puncti ancoram relativa ad elementum formae, in pixelis.
rotationnumbertrue0>= 0Angulus rotationis elementi formae, in gradibus.
scaleXnumbertrue1> 0Factor scalae horizontalis elementi formae. Valor maior quam 1 elementum amplificat, dum valor inter 0 et 1 id contrahit.
scaleYnumbertrue1> 0Factor scalae verticalis elementi formae. Valor maior quam 1 elementum amplificat, dum valor inter 0 et 1 id contrahit.
alphanumbertrue10 - 1Gradus transparentiae elementi formae. 1 plenam opacitatem repraesentat, et 0 plenam transparentiam repraesentat.

Exemplum Forma Fundamentalis

shapeElement.json

{
  "id": "ca6664b1-3ddf-4525-9137-1ad2440788bd",
  "type": "Shape",
  "start": 0,
  "duration": 5,
  "trackIndex": 1,
  "x": 250.04168816332555,
  "y": 5.833740234374999,
  "blendMode": "normal",
  "anchorX": 0,
  "anchorY": 0,
  "view": {
      "width": 300,
      "height": 300,
      "x": 0,
      "y": 0,
      "scaleX": 1,
      "scaleY": 1,
      "rotation": 0,
      "anchorX": 0,
      "anchorY": 0
  },
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "transform": {
      "x": 0,
      "y": 0,
      "anchorX": 0,
      "anchorY": 0,
      "rotation": 0,
      "scaleX": 1,
      "scaleY": 1,
      "alpha": 1
  },
  "keyframes": [],
  "shapeType": "SHAPE_RECT",
  "fill": "#818cf8",
  "stroke": "#4f46e5",
  "strokeWidth": 5
}

Exemplum Forma Itineris

shapeElement.json

{
  "id": "9106fbc1-e753-43b1-bccc-5402bee3bd40",
  "type": "Shape",
  "start": 0,
  "duration": 5,
  "trackIndex": 3,
  "x": 0,
  "y": 0,
  "blendMode": "normal",
  "anchorX": 0,
  "anchorY": 0,
  "rotation": 0,
  "scaleX": 1,
  "scaleY": 1,
  "alpha": 1,
  "skewX": 0,
  "skewY": 0,
  "view": {
    "x": 0,
    "y": 0,
    "scaleX": 1,
    "scaleY": 1,
    "rotation": 0,
    "anchorX": 0,
    "anchorY": 0
  },
  "transform": {
    "x": 0,
    "y": 0,
    "anchorX": 0,
    "anchorY": 0,
    "rotation": 0,
    "scaleX": 1,
    "scaleY": 1,
    "alpha": 1
  },
  "keyframes": [],
  "shapeType": "SHAPE_PATH",
  "fill": "#EAA0E3",
  "fillAlpha": 1,
  "fillType": 1,
  "stroke": null,
  "strokeWidth": 1,
  "paths": [
    {
      "c": 1,
      "v": [
        [349.601, 146.124],
        [345.894, 171.368],
        [174.8, 268.894],
        [135.70100000000002, 265.807],
        [118.95800000000003, 262.498],
        [31.56900000000003, 309.817],
        [67.26600000000003, 242.913],
        [0, 146.124],
        [174.801, 23.354],
        [349.601, 146.124]
      ],
      "i": [
        [0, 0],
        [2.4329999999999927, -8.150000000000006],
        [84.21999999999997, 0],
        [12.568999999999988, 2.0229999999999677],
        [5.459999999999994, 1.2860000000000014],
        [0, 0],
        [-4.677000000000007, 19.093999999999994],
        [0, 39.321],
        [-96.54399999999998, 0],
        [0, -67.804]
      ],
      "o": [
        [0, 8.651999999999987],
        [-16.567999999999984, 55.691],
        [-13.445999999999998, 0],
        [-5.693999999999988, -0.9119999999999777],
        [-33.803, 35.70800000000003],
        [21.046, -21.045999999999992],
        [-40.93500000000003, -22.461000000000013],
        [0, -67.804],
        [96.54399999999998, 0],
        [0, 0]
      ]
    }
  ]
}