npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

wxapp-canvas

v1.0.1

Published

微信小程序快速绘画工具

Downloads

6

Readme

简介

项目使用样式表来绘制 canvas,利用 wxss 下 rpx 单位实现适配,既能保证开发效率,同时也没有学习成本。

组件实现了 css 基本盒子模型,涵盖宽高、背景、字体、边框、内边距等,支持 自适应宽高文本换行圆角边框背景渐变背景重复 等好玩功能,感兴趣的可以了解下。

绘制代码没有与组件抽离,有兴趣的同学可以试试抽离去适配多终端玩玩。

注意:项目使用 canvasContext.measureTextnodesRef.fields[computedStyle] 等,请保持基础库 >= 2.1.0

快速开始

使用之前

在开始使用 wxapp-canvas 之前,请阅读 微信小程序自定义组件 的相关文档。

如何使用

以原生小程序为例:

  1. 安装 npm 依赖。

    npm install --save wxapp-canvas

    或着将依赖下的 dist 目录下的文件拷贝到自己的项目中,建议放置在 packages/wxapp-canvas 目录下,组件路径根据自己项目位置配置。

    ├─packages
    │  └─wxapp-canvas
    │      ├─babel-runtime
    │      │  └─helpers
    │      ├─behaviors
    │      │  └─element
    │      └─components
    │          ├─wxapp-canvas
    │          └─wxapp-canvas-div
    └─pages
        └─index
  2. 添加页面的 json 配置(手动拷贝文件时请注意引用路径)

    "usingComponents": {
        "wxapp-canvas": "wxapp-canvas/components/wxapp-canvas/index",
        "wxapp-canvas-div": "wxapp-canvas/components/wxapp-canvas-div/index"
    }
  3. 在 wxml 中使用组件

    <wxapp-canvas id="wxapp-canvas" class-name="m-wxapp-canvas">
        <wxapp-canvas-div class-name="m-wxapp-canvas-div" csstext="content: '这是节点的内容'; background-color: red;"></wxapp-canvas-div>
    </wxapp-canvas>
    • wxapp-canvas:
      • class-name: 外部样式类,用来代替 class
      • preload: 配置是否预加载资源
    • wxapp-canvas-div:
      • class-name: 外部样式类,用来代替 class
      • csstext: 外部样式,用来代替 style
  4. 在 wxss 中编写相应样式

    .m-wxapp-canvas {
        width: 100vw;
        height: 50vh;
    }
    
    .m-wxapp-canvas-div {
        position: absolute;
        bottom: 20rpx;
        right: 20rpx;
        width: 50%;
        height: 50%;
        border: 10rpx solid;
        border-top-color: red;
        border-right-color: blue;
        border-bottom-color: green;
        border-left-color: yellow;
    }

    与标准样式层叠表一致,支持基本盒子模型,包括:

    • dimension: 支持宽高自适应、最大最小宽高
    • border:支持基本边框、圆角、阴影
    • background:支持背景颜色、图片、线性渐变、repeat、大小
    • color:兼容标准样式表
    • font:兼容标准样式表
    • padding:兼容标准样式表
    • positioning:支持 top、left、bottom、right、z-index
    • text: 支持 text-align、vertical-align 用于节点内容位置的调节

    与标准和模型不一致的有:

    • position 仅支持 absolute
    • 不支持 display
    • 不支持嵌套节点
    • 在有阴影及边框的情况,背景将无法实现透明
    • 渐变背景请以 linear-gradient(<角度>, [<颜色> <位置>]) 的标准方式书写,如:linear-gradient(30deg, #fff 0%, #000 100%)
  5. 在 js 中执行渲染

    Page({
        myMethod() {
            wx.showLoading({ title: '绘制中' });
            const canvas = this.selectComponent('#wxapp-canvas');
            canvas
                .draw()
                .then(() => {
                    wx.hideLoading();
                    // 执行自定义操作,如保存为图片
    
                    canvas.getContext().anvasToTempFilePath(...)
                });
        }
    });

    组件对外暴露以下方法:

    • draw:绘制面板
      • @return {Promise}
    • getContext:导出画板上下文
      • @return {Object} canvas 上下文
    • adaptationText:适配文本
      • @param {String} str 需要适配的文本
      • @param {Object} font 文本样式
      • @param {Number} maxWidth 最大容器宽度
      • @return {Array} 分段好的文本

自定义扩展

wxapp-canvas 允许用户扩展自定义渲染节点。

一个栗子

一个基本的自定义渲染节点结构如下:

  1. wxml 内容

    <!-- 自定义节点需要设置一个空 view -->
    <view id="canvas-element" class="class-name" style="display: none;"></view>
  2. js 脚本内容

    import { behaviors } from 'wxapp-canvas/index.js';
    
    Component({
        externalClasses: ['class-name'],
    
        behaviors: [
            behaviors.element
        ],
    
        relations: {
            'element': {
                type: 'ancestor',
                target: behaviors.wxappCanvasBehavior,
                linked(target) {
                    this.$canvas = target;
                }
            }
        },
    
        methods: {
            /**
             * 用于自定义渲染内容
             */
            render(ctx) {
                // do some thing
            },
    
            /**
             * 用于预加载资源
             *
             * @return {Promise}
             */
            preload(rect, utils) {
                return this._preload(rect, utils)
                    .then(() => {
                        // do some thing
                    });
            }
        }
    });

栗子说明

组件提供 behaviors.elementbehaviors.wxappCanvasBehavior 两个 behavior,一个代表节点一个代表容器,任何自定义节点均需像上文例子一样集成 behaviors。

自定义组件还需配置外部样式类,以保证对外规格的统一。

自定义组件有两个必需的方法:renderpreload

  • render:接收 canvas 上下文,执行自定义绘画动作
  • preload: 资源预加载,接收容器 boundingClientRect 及适配工具脚本,该方法必须调用 _preload 解析样式方法及返回 Promise 函数。

预览组件

clone 项目,安装以来,用微信开发者工具打开项目下的 example(注意替换项目的 appid):

# clone 项目
git clone https://github.com/Mrminfive/wxapp-canvas.git

# 安装依赖
cd wxapp-canvas && npm install

# 编译组件
npm run dev

License

MIT

Copyright (c) 2018 minfive