Documentation

Web Code Globe Web Code Globe

Shapes

Shapes

Creating a new shape

  • First, select the desired shape in the toolbar.
  • Click anywhere in the Canvas (keep holding the mouse button down)
  • Drag the cursor away.
  • When you are satisfied with the size of the shape, release the mouse button.

The point where you push the mouse button down and the point where you release it will become the opposite corners of the newly-created shape (except for the bezier).

Creating a shape with equal width and height

To draw a perfect circle, square, regular polygon or a star, hold down the SHIFT key while creating it.

Renaming a shape

Change Name Inspector WebCode generates shape name for you, but you can (and probably should) provide your own, more descriptive name. This name is used in the generated code.

To change a name of a shape, just select the shape and enter a new name in the Inspector.

Deleting a shape

To delete a shape, select it and press the DELETE or BACKSPACE key.

Moving a shape

You can move any shape by dragging it with your mouse. The shape will snap to other shapes to help you with alignment.

To suppress this snapping behavior, hold down the CONTROL key.

Moving a shape using keyboard

You can move the selected shape using the ARROW keys. By default, this will move the selection by a single pixel in the desired direction.

To move the selection by half a pixel, press OPTION + ARROW.

To move the selection by 10 pixels, press SHIFT + ARROW.

Resizing a shape

Shape Resizing Control Points To resize a shape in a particular direction, click and drag the corresponding control point. WebCode will aid you by snapping to other shapes.

To suppress this snapping behavior, hold down the CONTROL key.

To maintaing the aspect ratio of the shape when dragging one of the corner control points, hold down the SHIFT key.

Setting a fill color or fill gradient

Setting a fill

Click on the fill popup button and pick a color or gradient. You can also create a new color or gradient by choosing the “Add new color/gradient...” option from the popup menu.

Setting a fill shadow

Setting a fill shadow

Inner and outer shadows are set separately. A shape can have both an inner and outer shadow. To set an outer shadow, click on the “Outer shadow” popup button in the “Fill” section of the Inspector. Then, choose the shadow you like, or create a new one by picking the “Add new shadow...” option from the popup menu. Inner shadow has its own popup button, but the steps are the same.

Setting a stroke color

Setting a stroke colorSetting a stroke color

Click on the stroke popup button and pick a color. You can also create a new color by choosing the “Add new color...” option from the popup menu.

Setting a stroke shadow

Click on the popup button labeled “Shadow”, then pick a shadow you like (or create a new one by choosing the “Add new shadow...” option). Note that strokes and fills each have separate shadow settings. Strokes cannot have inner shadows.

Copying style of another shape

It is often convenient to create a new shape that has the same “style” as some other, already drawn shape. First, select the shape with style you want to copy. Then, create a new shape. The newly-created shape will automatically match the style of the previously-selected shape.

Extracting shape attributes

Some shape attributes can be extracted. This only affects the generated code. An extracted attribute is defined as a separate variable just below the library item declarations. This makes it is easy for you to change the attribute manually after you integrate the generated code to your source code. An attribute that is not extracted is usually used as a plain constant somewhere deep in the generated code.

You can extract an attribute by clicking on the extraction button, where available:

Extract OnExtract On Extract OffExtract Off

Flipping a shape

Flip ToolsFlip Tools To flip a shape horizontally or vertically, click on the appropriate icon in toolbar.

You can also use the application menu option “Selection / Flip Horizontally” and “Selection / Flip Vertically”.

Contracting and expanding a shape

Contract and Expand Tools When you contract a shape, its sides are pushed inwards by a single pixel. Expanding a shape does the reverse. To contract or expand a shape, click on the corresponding icon in the toolbar.

Alternatively, you can use “Selection / Contract” and “Selection / Expand” application menu options.

Converting shape to a bezier

Converting shape to a bezier You can convert any shape to a bezier shape. Bezier shapes are sometimes more useful, because you can edit and rotate them.

To convert shape to a bezier, select the shape and choose “Selection / Convert to Bezier” from the application menu. You can also do the same from the Canvas context menu.