KevLinDev - GUI

Introduction

Circle is a JavaScript object that allows you to interactively manipulate a circle via Handle objects: a center handle and a radius handle. This code is used in the 2D Geometry section of this site.

The circle object includes methods for finding the intersection of a circle with a circle and the intersection of a circle with a line.

Circle is a sub-class of the Shape class and therefore inherits all methods and properties of the Shape class.

Reference

Methods

constructor - new Circle(svgNode);

This method creates a new Circle object. All initialization is handled by the init() method. All parameters for this method are described below.

init(svgNode);

init() initialized all properties for this object. Handles are created for the center and the radius of the SVG circle element.

svgNode is an SVG circle element that is to be managed by this object.

realize();

realize() constructs the SVG DOM nodes needed to visualize the handles of this widget. Event listeners are registered as needed to implement this object's functionality.

translate(delta);

translate() translates the SVG element and the associated handles by the specified amount.

delta is a Point2D.

refresh();

refresh() applies the handle positions to the SVG element associated with this object.

registerHandles();

registerHandles() adds all handles used by this object to the mouser's handle list.

unregisterHandles();

unregisterHandles() removes all handles used by this object from the mouser's handle list.

selectHandles();

selectHandles() set the current select value for all handles used by this object.

showHandles();

showHandles() sets the current visibility value for all handles used by this object.

getIntersectionParams() : IntersectionParams;

This method returns an IntersectionParams object to specify this shape's name and the necessary parameters to find the intersection of this shape with another. The name is used by the Intersection object to determine which intersection routine to call.

Properties

center is a handle at the center of the circle managed by this object.

last is a Point2D that is used to update a circle when the center handle is being dragged.

radius is a handle on the circle managed by this object. Adjusting this handle adjusts the circle's radius.

Example

This example allows you to adjust the position and radius of the circles within the SVG document. Here is a brief summary of the editing procedures:

Click an unselected circle once to select it.
Click a selected circle to select all of its handles.
Shift-click an unselected circle to add all of its handles it to the current selection.
Shift-click a selected circle to remove it from the current selection.
Click an unselected handle to select it
Shift-click an unselected handle to add it to the current selection
Shift-click a selected handle to remove it from the current selection
Drag a handle to manipulate the SVG element
Click the background to deselect all objects

Download

Circle.js - the circle object only...cannot be used in isolation

2D.js.gz - all objects needed to use this object and other 2D geometry objects