交互系统

有没有想过在你的Newcar动画中添加一些更多的动态内容？ 例如单击一个正方形以切换到下一个场景，或者当您将鼠标悬停在组件上面时将其放大？ 交互系统可以使您做到这一切。

在 1.0.0-alpha.0 版本中，我们正式发布了交互系统。 使用它来您可以使您的动画更像 Flash。

下面是一个简单的例子： 当您单击方块时，将会显示弹窗，并且控制台中将打印出 Clicked!!

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)

尝试去打开控制台， 并且点击它吧！

内置事件

此外，Newcar 还有许多不同的内置事件供您选择，例如：

• click
• drag
• dragEnd
• dragEnter
• dragLeave
• dragOver
• dragStart
• drop
• keyDown
• keyPressed
• keyUp
• mouseEnter
• mouseLeave
• mouseMove
• mouseOut
• mouseOver
• mouseUp
• ……more events are still in development. You can also customize events according to the methods in Common Events. PRs are welcome!

Widget 事件

在 Newcar 中，一些复杂的小部件可能会触发它们自己的自定义事件。 您可以使用 on 方法通过传入事件名称来侦听这些事件，例如：

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)