NativeScript 虚拟摇杆

本插件为 NativeScript 5 版本的相似版本，可在此处获取

免责声明

本插件几乎完全基于 Victor Sossa 的源代码。感谢大家的辛勤工作和贡献！

截图

screenshot

安装

ns plugin add @reazerdev/nativescript-virtual-joystick

用法

Android 库
controlwear virtual-joystick-android

<Page class="page"
  navigatingTo="onNavigatingTo"
  xmlns="http://schemas.nativescript.org/tns.xsd"
  xmlns:jv="@reazerdev/nativescript-virtual-joystick">
  <ActionBar class="action-bar">
    <Label class="action-bar-title" text="Virtual Joystick"></Label>
  </ActionBar>

  <StackLayout>
    <Label text="{{ 'Angle: ' + angle }}" />
    <Label text="{{ 'Strength: ' + strength }}" />

    <Label text="{{ 'Left Horizontal: ' + lx }}" />
    <Label text="{{ 'Left Vertical: ' + ly }}" />

    <Label text="{{ 'Right Horizontal: ' + rx }}" />
    <Label text="{{ 'Right Vertical: ' + ry }}" />

    <StackLayout orientation="horizontal">
      <jv:VirtualJoystick
        move="onMove"
        angle="{{ angle }}"
        strength="{{ strength }}"
        xAxis="{{ lx }}"
        yAxis="{{ ly }}"
        jvColor="#AA0000"
        jvBackgroundColor="#0000AA"
        jvBorderColor="#00AA00"
        width="50%" />

      <jv:VirtualJoystick
        angle="{{ angle }}"
        strength="{{ strength }}"
        xAxis="{{ rx }}"
        yAxis="{{ ry }}"
        jvColor="#330000"
        jvBackgroundColor="#000033"
        jvBorderColor="#003300"
        buttonStickToBorder="true"
        width="50%" />
    </StackLayout>
  </StackLayout>
</Page>

import { NavigatedData, Page } from "@nativescript/core";
import { HomeViewModel } from "./home-view-model";
import { VirtualJoystickEventData } from '@reazerdev/nativescript-virtual-joystick';

export function onNavigatingTo(args: NavigatedData) {
  const page = <Page>args.object;

  page.bindingContext = new HomeViewModel();
}

export function onMove(data: VirtualJoystickEventData) {
  console.log(`Angle: ${data.angle}`);
  console.log(`Strength: ${data.strength}`);
  console.log(`Horizontal: ${data.xAxis}`);
  console.log(`Vertical: ${data.yAxis}`);
}

在 Angular 应用中使用

导入 Angular 模块

import { NativeScriptVirtualJoystickModule } from '@reazerdev/nativescript-virtual-joystick/angular';

@NgModule({
    [
       ...,
       NativeScriptVirtualJoystickModule
    ],
    ...
})
export class AppModule {}

在视图中使用自定义元素

<StackLayout orientation="horizontal">
  <VirtualJoystick
    (move)="onMove($event)"
    angle="{{ angle }}"
    strength="{{ strength }}"
    xAxis="{{ lx }}"
    yAxis="{{ ly }}"
    jvColor="#AA0000"
    jvBackgroundColor="#0000AA"
    jvBorderColor="#00AA00"
    width="50%" />

  <VirtualJoystick
    angle="{{ angle }}"
    strength="{{ strength }}"
    xAxis="{{ rx }}"
    yAxis="{{ ry }}"
    jvColor="#330000"
    jvBackgroundColor="#000033"
    jvBorderColor="#003300"
    buttonStickToBorder="true"
    width="50%" />
</StackLayout>

import { Component } from '@angular/core';
import { VirtualJoystickEventData } from '@reazerdev/nativescript-virtual-joystick';

@Component({
  selector: 'ns-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {
  public onMove(event: VirtualJoystickEventData) {
    console.log(event.angle);
    console.log(`Strength: ${data.strength}`);
    console.log(`Horizontal: ${data.xAxis}`);
    console.log(`Vertical: ${data.yAxis}`);
  }
}

API

属性	Css	类型	默认值	描述
angle	-	数字	-1	只读。按钮的角度。逆时针，0 为右侧。
strength	-	数字	0	只读。中心到中心的距离，范围 0 - 100。
xAxis	-	数字	0	只读。水平轴上的中心距离，范围 -1（左侧）到 1（右侧）。
yAxis	-	数字	0	只读。垂直轴上的中心距离，范围 -1（向下）到 1（向上）。
jvColor	jv-color	颜色	#000000	按钮的颜色。如果提供了图像，则忽略此属性。
jvImage	jv-image	字符串	未定义	用作按钮的图像。
jvBackgroundColor	jv-background-color	颜色	透明	范围圆圈的颜色。
jvBorderColor	jv-border-color	颜色	透明	范围圆圈边框的颜色。
jvBorderWidth	jv-border-width	数字	3	范围圆圈边框的厚度。
buttonAutoRecenter	-	布尔值	真	-
buttonStickToBorder	-	布尔值	假	如果设置为真，按钮只有两种状态：中心（强度 0）或按下（强度 100）。
buttonDirection	-	数字	0	限制按钮移动。0 表示所有方向，正数限制垂直轴移动，负数限制水平轴移动。
buttonSizeRatio	-	数字	0.25	按钮大小与部件大小的比例。
backgroundSizeRatio	-	数字	0.75	范围圆圈大小与部件大小的比例。
fixedCenter	-	布尔值	真	按钮中心（强度 0）是否固定到部件中心或相对于触摸点。
enabled	-	布尔值	真	部件是否接受点击并发出事件。

许可证

Apache 许可证版本 2.0