Easy Java Simulations Wiki | Main / HtmlViewElementsDrawingPanel

Important notice about interaction:

If a panel is not Enabled, none of its drawables will be enabled for interaction. This is due to performance issues.

(:html:)

    <script src="../uploads/Download/EjsS_doc/ejss_doc_simple.js"></script>
    <script language="JavaScript">
      var dummy;
      getInfo("DrawingPanel" ,"EJSS_DRAWING2D.DrawingPanel");
    </script>

(:htmlend:)

Basic container for 2D drawing. A drawing panel is a view element able to display drawable objects within a rectangular region of the plane in which it defines a world coordinate system in user-provided coordinates. Drawables, or drawing elements, are graphical objects which draw themselves (in different forms) in a given position and with a given size within a drawing panel.

Properties

Scales
Name	Description	Values accepted	Default
Autoscale X	Whether to automatically adjust X scales.	A Boolean or variable or one of the constants true or false.	True
Autoscale Y	Whether to automatically adjust Y scales.	A Boolean or variable or one of the constants true or false.	True
Minimum X	Minimum X value that can be displayed.	A constant or variable	-1
Maximum X	Maximum X value that can be displayed.	A constant or variable	1
Minimum Y	Minimum Y value that can be displayed.	A constant or variable	-1
Maximum Y	Maximum Y value that can be displayed.	A constant or variable	1
X Margin (%)	The percentage of the margin in the autoscaled horizontal direction.	A constant or variable	0
Y Margin (%)	The percentage of the margin in the autoscaled vertical direction.	A constant or variable	0
SquareAspect	Whether to keep a square aspect.	A Boolean or variable or one of the constants true or false.	True
ScaleXType	SCALE_NUM, SCALE_LOG.	scale can be either in numbers or log.	SCALE_NUM
ScaleYType	SCALE_NUM, SCALE_LOG.	scale can be either in numbers or log.	SCALE_NUM
Interaction
Name	Description	Values accepted	Default
Enabled	to enable interaction in this panel.	A Boolean or variable or one of the constants true or false.	False
CursorTypeForMove	cursor type css https://developer.mozilla.org/en-US/docs/Web/CSS/cursor.	default, grab, pointer are examples.	default
StopEventPropagation	stop event propagation in this panel.	A Boolean or variable or one of the constants true or false.
ShowAreaRectangle	show area of a rectangle selection in this panel.	A Boolean or variable or one of the constants true or false.	True
EnabledZooming	enabled zooming in this panel.	A Boolean or variable or one of the constants true or false.	False
EnabledDragging	enabled dragging in this panel.	A Boolean or variable or one of the constants true or false.	False
OnMove	The action to invoke when the element is pressed.	The JavaScript code to invoke for the action.
OnPress	The action to invoke when the element is pressed.	The JavaScript code to invoke for the action.
OnDrag	The action to invoke when the element is dragged.	The JavaScript code to invoke for the action.
OnRelease	The action to invoke when the element is released.	The JavaScript code to invoke for the action.
OnDoubleClick	The action to invoke when the mouse enters the element.	The JavaScript code to invoke for the action.
OnOrientationChange	The action to invoke when the mouse enters the element.	The JavaScript code to invoke for the action.
OnZoom	The action to invoke when the mouse enters the element.	The JavaScript code to invoke for the action.
Graphical Aspect
Name	Description	Values accepted	Default
GraphicsMode	Graphics mode.	SVG or Canvas	SVG
Visible	The visibility of the element.	A Boolean or variable or one of the constants true or false.	True
Display	The css display of the element. https://developer.mozilla.org/en-US/docs/Web/CSS/display	css display block, inline-block, flex, inline-flex etc. example to try booleanVariable?"inline-block":"none" // if booleanVariable is true then display is set to inline-block, else display is set to none. This provides a nice method to show or display none the drawingPanel, superior to Visible as Visible will continue to keep the drawingPanel is the same position, creating a blank space.	True
Width	values are default in px, accepts % https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units.	800px or 100%	400px
Height	values are default in px, accepts vh https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units.	800px pr 90vh	300px
Background	The background color for the element.	Use the editor provided or read about colors.	White
Foreground	The color to use when drawing or writing in the element.	Use the editor provided or read about colors.	Black
LineWidth	The font used to display text in the element.	Use the editor provided to select name, style and size of the font.
ShapeRendering	shape-rendering attribute provides hints to the renderer about what tradeoffs to make when rendering shapes like paths, circles, or rectangles. https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering.	example to try auto \| optimizeSpeed \| crispEdges \| geometricPrecision.	auto
CSS	css to apply.		none
Transform	string https://developer.mozilla.org/en-US/docs/Web/CSS/transform.	example rotate(0.5turn)	none
Tooltip	Text displayed when the mouse is over the element.	A string constant or variable.	none

Decoration
Name	Description	Values accepted	Default
Gutters	Gutters around the drawing area.	Type the size of the four gutters or use the editor provided.[LEFT,TOP,RIGHT,BOTTOM]	[50,50,50,50]
GuttersLineColor	Gutters line color the drawing area.	line color of the gutters or use the editor provided.	black
GuttersLineWidth	Gutters Line Width around the drawing area.	size of the four gutters line width	1
GuttersColor	Gutters color	such as rgb(239,239,254), rgba(239,239,254,0.1), blue	rgb(239,239,254)
GuttersRendering	Gutters Rendering.	string	.
ShowCoordinates	Whether to display coordinates when the mouse is pressed.	A Boolean or variable or one of the constants true or false.
CoordinatesFormat	The format to the coordinates.	The property refers to the way the panel displays (in a yellow box at its lower left corner) the X and Y coordinate when you click on a point in the panel. The special value null makes the panel not to display this coordinate.	(0.00,0.00)
TRMessage	The message to display at the top-right corner.	A string constant or variable.
TLMessage	The message to display at the top-left corner.	A string constant or variable.
BRMessage	The message to display at the bottom-right corner.	A string constant or variable.
BLMessage	The message to display at the bottom-left corner.	A string constant or variable.