商城
作者 NativeScript.org
@nativescript-community/ui-canvaslabel
由 NativeScript 社区提供 | v1.2.36
内置 NativeScript 标签的替代品，但使用 canvas，允许极大的复杂性和自定义。
npm i --save @nativescript-community/ui-canvaslabel

@nativescript-community/ui-canvaslabel

Downloads per month NPM Version

内置 NativeScript 标签的替代品，但使用 canvas，允许极大的复杂性和自定义。


目录

A NativeScript Label 小部件。这个小部件与其他标签组件采取了不同的方法。它基于 nativescript-canvas 并允许在一个单独的小部件内绘制多个标签。它允许极大的复杂性和自定义。

安装

从您项目的根目录运行以下命令

ns plugin add @nativescript-community/ui-canvaslabel

配置

它几乎与普通标签一样工作。您可以创建 span，就像 {N} 标签一样。但是与 {N} 组件有很大的不同。CSpan 不支持 CSS 类，而且永远不会支持！这实际上是为了使组件更加高效而故意设计的。

目前 CanvasLabel 无法自动调整大小。我将来会添加一些方法来实现这一点，但它在某种程度上违背了组件的目的。

CanvasLabel 组件支持大多数标签属性：color、fontSize、fontFamily、fontStyle、fontWeight、textAlignment。这些可以通过 CSS 定义。

现在使用 CanvasLabel，您不会直接设置文本。相反，您创建 CSpan 或 CGroup

以下是一个复杂的 Vue 布局的示例

<CanvasLabel id="canvaslabel" fontSize="10" color="white" backgroundColor="darkgray">
    <CGroup fontSize="18" verticalAlignment="middle" paddingLeft="20">
        <CSpan :text="item.text1" fontWeight="bold" />
        <CSpan :text="'\n' + item.text2" color="#ccc" fontSize="16" />
    </CGroup>

    <CGroup fontSize="12" verticalAlignment="bottom" paddingLeft="20" paddingBottom="1">
        <CSpan :text="item.icon1" fontSize="20" color="green" :fontFamily="mdiFontFamily" />
        <CSpan :text="' ' + item.texticon1" verticalTextAlignment="center" />
        <CSpan :text="'   ' + item.icon2" fontSize="20" color="red" :fontFamily="mdiFontFamily" />
        <CSpan :text="' ' + item.texticon2" verticalTextAlignment="center" />
        <CSpan :text="'   ' + item.icon3" fontSize="20" color="yellow" :fontFamily="mdiFontFamily" />
        <CSpan :text="' ' + item.texticon3" verticalTextAlignment="center" />
    </CGroup>

    <CGroup fontSize="12" verticalAlignment="middle" horizontalAlignment="center" textAlignment="right" paddingRight="20" color="brown" width="60">
        <CSpan :text="item.icon1" fontSize="14" :fontFamily="mdiFontFamily" />
        <CSpan :text="'\n' + item.texticon1" paddingRight="10" />
    </CGroup>
    <CSpan :text="item.text4" color="lightgray" fontSize="14" textAlignment="right" paddingRight="20" paddingTop="4" />
</CanvasLabel>

有关完整示例/文档，请参阅 Vue 演示和类型定义。

性能

CanvasLabel 被设计得非常快。它主要是为了在列表视图中使用。它使用直接绘制文本的技术，而不是使用重量级的原生文本组件。这种技术被许多寻求最佳性能的应用程序所采用。最好的例子之一是 Telegram。

待办事项/限制

  • 目前没有无障碍支持（但应该是可能的）
  • 标签无法调整大小。我将添加一些方法来实现这一点。但可能不是您习惯的方式。
  • 暂不支持省略。将会实现（这个 可能是一个解决方案）
  • 可以添加很多 canvas 功能，如阴影、渐变...
  • 可能至少可以对组和顶层 span 进行变换支持。

示例

  • 基本
    • 一个基本的 SVG 示例

演示和开发

仓库设置

该仓库使用子模块。如果您没有使用 --recursive 进行克隆，则需要调用

git submodule update --init

用于安装和链接依赖项的包管理器必须是 pnpm 或 yarn。npm 不可用。

开发和测试：如果您使用 yarn，则运行 yarn；如果您使用 pnpm，则运行 pnpm i

交互式菜单

要启动交互式菜单，请运行npm start（或yarn start或pnpm start）。这将列出所有常用的脚本。

构建

npm run build.all

警告：似乎yarn build.all并不总是能正常工作（在node_modules/.bin中找不到二进制文件），这就是为什么文档明确使用了npm run

演示

npm run demo.[ng|react|svelte|vue].[ios|android]

npm run demo.svelte.ios # Example

在某种意义上，演示设置是有点特别的，如果你想要修改或添加演示，你不需要直接在demo-[ng|react|svelte|vue]中工作。相反，你在demo-snippets/[ng|react|svelte|vue]中工作。你可以从每个版本的install.ts开始，看看如何注册新的演示。

贡献

更新仓库

你可以相当容易地更新仓库文件。

首先更新子模块。

npm run update

然后提交更改，然后更新通用文件。

npm run sync

然后你可以运行yarn|pnpm，如果有任何更改的文件，请提交。

更新 README

npm run readme

更新文档

npm run doc

发布

发布完全由lerna处理（你可以添加-- --bump major来强制进行主要版本发布）。只需运行即可。

npm run publish

修改子模块

仓库使用https://来处理子模块，这意味着你无法直接将子模块推送到仓库。一个简单的解决方案是修改~/.gitconfig并添加

[url "ssh://[email protected]/"]
	pushInsteadOf = https://github.com/

问题

如果您有任何问题/问题/评论，请随时创建一个问题或开始一次在NativeScript社区Discord中的对话。