Skip to content

Interaction System

Have you ever thought about adding some more dynamic content to your Newcar animations? Like clicking a square to switch to the next scene, or having a shape enlarged when you hover the mouse over it? The interaction system can make all your fantasies about this come true.

In version 1.0.0-alpha.0, we officially released the interaction system. You can use it to make your animations feel like Flash.

Here is a simple example: When you click on this square, you will see a pop-up window will be displayed, Clicked! will be printed in the console:

typescript
import * as nc from 'newcar'

const root = new nc.Rect(100, 100,
  {
    x:3,
    y:3,
    style:{
      border:true,
      borderColor:nc.Color.BLACK,
      borderWidth:3
    }
  })

const scene = new nc.Scene(root)

Try opening the console and clicking on it!

Built-in Events

In addition, Newcar has many different built-in events for you to choose from, such as:

Widget Events

In Newcar, some complex widgets may trigger their own custom events. You can also use the on method to listen for these events by passing in the event name string, such as:

typescript
import * as nc from 'newcar'

const root = new nc.ComplexWidget(......)
  .on('customEvent', (widget, x, y) => {
    console.log('Clicked!')
    alert("Clicked!");
  })

const scene = new nc.Scene(root)

Released under the Apache-2.0 license