Snap to Objects and Snap Align are two options useful to align, join and draw more precisely shapes in the Stage.

Snap to Objects

The "Snap to objects" option can be selected from View -> Snapping -> Snap to Objects, or from the "Snap to Objects" button on the options area of the "Tools panel" (the icon with the image of a magnet, see the picture below).
Select Snap to Objects
- If Snap to Objects is enabled, it displays a small, thick circle under the pointer, when you draw a perfect circle, a square, a perfect vertical and horizontal line, or when the object is within snapping distance of another object.

Snap to Objects examples

Snap to Objects examples
- When this option is enabled, it forces to merge the line or the shape when it comes close to other object. When you want to draw lines or shapes close to each other, it is indicated to disable "Snap to Objects".
- The Snap tolerance can be adjusted from Edit -> Preferences, then choose Drawing. In that window, to the Connect lines you can select: "Must be close", "Normal", or "Can be distant".
- Snap to Objects not work with the Pencil, Brush, or Eraser Tools.

Snap Align

Snap Align helps you to position objects on the stage. It provides guidelines when elements are aligned, dashed lines appear that aid you in aligning to the edge or center of other objects. And it also makes items snap into place when they're close.
To enable "Snap Align", click View -> Snapping -> Snap Align.

Select Snap Align

Select Snap Align

Example Snap Align

Snap Align examples
The change the Snap Align settings (tolerance), click View -> Snapping -> Edit Snapping, click Advanced to display all options, then select and configure the snap options you want to turn on (see the image below). Configure Snap Align
- To make the snap align setting the default for future use, click Save Default.

Daily Test with Code Example

Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
Indicate the PHP variable that contains data added in URL address after the "?" character.
if(isset($_GET["id"])) {
  echo $_GET["id"];
Snap to Objects and Snap Align

Last accessed pages

  1. Multiple Select Dropdown List with AJAX (15558)
  2. Moving html element to a random direction (84)
  3. XHTML References - Old (15)
  4. Star shapes with CSS (4464)
  5. Get and Modify content of an Iframe (12618)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (387)
  2. Register and show online users and visitors (355)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (327)
  4. Insert, Select and Update NULL value in MySQL (256)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (254)