Container

A Container is the base component for all components that render to the screen. It can be used on its own, but components such as Sprite or Graphics will be composed of Containers (and will provide context for getContainer)

When child components are rendered inside, their coordinates become local to the parent Container.

Usage

<script>
  import { Container, Text } from 'svelte-pixi'
</script>

<Container>
  <Text text="Hello" x={-10} y={-60} style={{ fill: 'white' }} />
  <Text text="World" x={-10} y={0} style={{ fill: 'white' }} />
</Container>

API

Props

Name	Description
accessible false	boolean Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set
accessibleChildren true	boolean Setting to false will prevent any children inside this container to be accessible.
accessibleHint	string Sets the aria-label attribute of the shadow div
accessiblePointerEvents 'auto'	string Specify the pointer-events the accessible div will use Defaults to auto.
accessibleTitle	string Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'displayObject [tabIndex]'
accessibleType 'button'	string Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type.
alpha	number The opacity of the object.
angle	number The angle of the object in degrees. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
cacheAsBitmap	boolean Set this to true if you want this display object to be cached as a bitmap. This basically takes a snap shot of the display object as it is at that moment. It can provide a performance benefit for complex static displayObjects. To remove simply set this property to false IMPORTANT GOTCHA - Make sure that all your textures are preloaded BEFORE setting this property to true as it will take a snapshot of what is currently there. If the textures have not loaded then they will not appear.
cacheAsBitmapMultisample	PIXI.MSAA_QUALITY The number of samples to use for cacheAsBitmap. If set to null, the renderer's sample count is used. If cacheAsBitmap is set to true, this will re-render with the new number of samples.
cacheAsBitmapResolution	number The resolution to use for cacheAsBitmap. By default this will use the renderer's resolution but can be overriden for performance. Lower values will reduce memory usage at the expense of render quality. A falsey value of null or 0 will default to the renderer's resolution. If cacheAsBitmap is set to true, this will re-render with the new resolution.
cullable	boolean Should this object be rendered if the bounds of this object are out of frame? Culling has no effect on whether updateTransform is called.
cullArea	PIXI.Rectangle If set, this shape is used for culling instead of the bounds of this object. It can improve the culling performance of objects with many children. The culling area is defined in local space.
cursor	string This defines what cursor mode is used when the mouse cursor is hovered over the displayObject.
eventMode	PIXI.EventMode The type of interaction a DisplayObject can be. For more information on values and their meaning, see https://pixijs.download/dev/docs/PIXI.DisplayObject.html#eventMode
filterArea	PIXI.Rectangle The area the filter is applied to. This is used as more of an optimization rather than figuring out the dimensions of the displayObject each frame you can set this rectangle. Also works as an interaction mask.
filters	PIXI.Filter[]null Sets the filters for the displayObject. IMPORTANT: This is a WebGL only feature and will be ignored by the canvas renderer. To remove filters simply set this property to 'null'.
height	number The height of the Container, setting this will actually modify the scale to achieve the value set.
hitArea	PIXI.IHitArea Interaction shape. Children will be hit first, then this shape will be checked. Setting this will cause this shape to be checked in hit tests rather than the displayObject's bounds.
instance	PIXI.Container The PIXI.Container instance. Can be set or bound to.
interactive	Enable interaction events for the DisplayObject. Touch, pointer and mouse events will not be emitted unless interactive is set to true. @deprecated since 7.0.0, Setting interactive is deprecated, use eventMode='none'/'passive'/'auto'/'static'/'dynamic' instead.
interactiveChildren	Determines if the children to the displayObject can be clicked/touched. Setting this to false allows PixiJS to bypass a recursive hitTest function @deprecated since 7.0.0, Setting interactive is deprecated, use eventMode='none'/'passive'/'auto'/'static'/'dynamic' instead.
isMask	boolean Does any other displayObject use this object as a mask?
isSprite	boolean Used to fast check if a sprite is.. a sprite!
mask	PIXI.ContainerPIXI.MaskDatanull Sets a mask for the displayObject. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. In PixiJS a regular mask must be a PIXI.Graphics or a PIXI.Sprite object. This allows for much faster masking in canvas as it utilities shape clipping. To remove a mask, set this property to null. For sprite mask both alpha and red channel are used. Black mask is the same as transparent mask. At the moment, PIXI.CanvasRenderer doesn't support PIXI.Sprite as mask.
name	string The instance name of the object.
pivot	PointLike The center of rotation, scaling, and skewing for this display object in its local space. The position is the projection of pivot in the parent's local space. By default, the pivot is the origin (0, 0).
position	PointLike The coordinate of the object relative to the local coordinates of the parent.
renderable	boolean Can this object be rendered, if false the object will not be drawn but the updateTransform methods will still be called. Only affects recursive calls from parent. You can ask for bounds manually
rotation	number The rotation of the object in radians. 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
scale	PointLike The scale factors of this object along the local coordinate axes. The default scale is (1, 1).
skew	PointLike The skew factor for the object in radians.
sortableChildren	boolean If set to true, the container will sort its children by zIndex value when updateTransform() is called, or manually if sortChildren() is called. This actually changes the order of elements in the array, so should be treated as a basic solution that is not performant compared to other solutions, such as @link https://github.com/pixijs/pixi-display Also be aware of that this may not work nicely with the addChildAt() function, as the zIndex sorting may cause the child to automatically sorted to another position.
transform	PIXI.Transform World transform and local transform of this object. This will become read-only later, please do not assign anything there unless you know what are you doing.
visible	boolean The visibility of the object. If false the object will not be drawn, and the updateTransform function will not be called. Only affects recursive calls from parent. You can ask for bounds or call updateTransform manually.
width	number The width of the Container, setting this will actually modify the scale to achieve the value set.
x	number The position of the displayObject on the x axis relative to the local coordinates of the parent. An alias to position.x
y	number The position of the displayObject on the y axis relative to the local coordinates of the parent. An alias to position.y
zIndex	number The zIndex of the displayObject. If a container has the sortableChildren property set to true, children will be automatically sorted by zIndex value; a higher value will mean it will be moved towards the end of the array, and thus rendered on top of other display objects within the same container.

Slots

Name	Props	Fallback
default	{}

Events

Name	Type	Detail
added	dispatched
create	dispatched
removed	dispatched