RoundButton¶

Overview¶

RoundButton is the base class for round buttons.

@author John Blanco (PhET Interactive Simulations) @author Sam Reid (PhET Interactive Simulations)

Class RoundButton¶

import { RoundButton } from 'scenerystack/sun';

Constructor¶

new RoundButton( buttonModel : ButtonModel, interactionStateProperty : TReadOnlyProperty<ButtonInteractionState>, providedOptions? : RoundButtonOptions )¶

Instance Methods¶

Static Properties¶

ThreeDAppearanceStrategy : TButtonAppearanceStrategy¶

Type RoundButtonOptions¶

import type { RoundButtonOptions } from 'scenerystack/sun';

• radius?: number | null
• lineWidth?: number
• stroke?: TPaint | null
• touchAreaDilation?: number
  pointer area dilation
• mouseAreaDilation?: number
• touchAreaXShift?: number
  pointer area shift
• touchAreaYShift?: number
• mouseAreaXShift?: number
• mouseAreaYShift?: number
• & ButtonNodeOptions

Class ThreeDAppearanceStrategy¶

ThreeDAppearanceStrategy is a value for RoundButton options.buttonAppearanceStrategy. It makes a round button look 3D-ish by using gradients that create the appearance of highlighted and shaded edges. The gradients are set up to make the light source appear to be in the upper left.

import { ThreeDAppearanceStrategy } from 'scenerystack/sun';

Constructor¶

new ThreeDAppearanceStrategy( buttonBackground : Path, interactionStateProperty : TReadOnlyProperty<ButtonInteractionState | RadioButtonInteractionState>, baseColorProperty : TReadOnlyProperty<Color>, providedOptions? : TButtonAppearanceStrategyOptions )¶

Instance Methods¶

dispose()¶

Instance Properties¶

maxLineWidth : number¶

(readonly)

Source Code¶

See the source for RoundButton.ts in the sun repository.