{"bugs":{"url":"https://github.com/raxjs/rax-components/issues"},"dist":{"shasum":"7ecf86b51180fd236209d4e97bfba7a211d07c91","tarball":"https://registry.npmjs.org/rax-canvas/-/rax-canvas-2.2.1-0.tgz","fileCount":53,"integrity":"sha512-PTKbzdOayslrAkmYhHQsDIaShhL8d70wyUDOnP0JsN89MgUaowi8Fvg18fqyERNruMDZBb51O7ZYATvcp/atiQ==","signatures":[{"sig":"MEUCIGrulceX0sDQJbWqmUW8N3z5B/vHXs2gdVNkz915Hc0EAiEAu+PLtdLPcq/XuQyN5uVuEdg0yI38l1fKX8nQikq0iB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":46066,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuZUCRA9TVsSAnZWagAAoD8QAJmPv87runcH94JDTznA\nN5RaO35qF/2wZOowZY9Sp2zAPHwRu9TN7pw8HtQd4j0i7CxuQyNajWAfUcsb\nUgGMVWGjkAjjOhKu31HhSdFLPSvUjwF4rTEs6eMosRpRZwytbvWlc60AsBWy\njf+agl/MM4VjHEnw0MhG6E6kt8e5FPXXU6Qoyh9GqrJouizSxgfw7cT14drX\nT7+E75dgqzIhIIBLmpt/WWzYUOIk6/iJbFliC4BdQs04Np1gBZFaEM+KwZpm\nOeDofm4ZQ+QyqQT2aNvmeEnf2F+yYxQ+3eXw6Gbfj/YvdKEsK7msW10+nOeP\nMVpERspcqsA9jO3oR5jvhro6VQAtbsEg3xMZjXk+jLI82TbrWNI94RWzwpX1\npGkK3WGkYVvD7L/dnqYmmCf1OMnFB/cH2WtD3jpE15FDrSSwUuT9PvIxOHkF\ndprhs+t2V8BlC0R2aBpObOH0q3d7WJy4tpZFdZxEMaEuJF+YxUy19Uvf6Gm7\noC5ROCEt4FiCNdvz1++fhZ3yFU/v9GzsAEhGoRRwI3kp7g0yiz++S0jrRFgj\nEqThxvrIRkSANYjDcSKhGqiD7bOaZqm7+PRQ+jh2dJDYyAYjSkY1cwJWHAMV\npP6w6TyXjMKiLIH1HuYQytD7Ggb5V0Dut1sH/uICqFrzhC7ShmLit5Pn/q7L\nAa2z\r\n=w0Ft\r\n-----END PGP SIGNATURE-----\r\n"},"main":"lib/index.js","name":"rax-canvas","author":{"name":"rax"},"module":"es/index.js","readme":"[![npm](https://img.shields.io/npm/v/rax-canvas.svg)](https://www.npmjs.com/package/rax-canvas)\n\n## 描述\n画布组件.\n\n- 在 Weex 上依赖 [gcanvas](https://github.com/weex-plugins/weex-plugin-gcanvas)\n- 在支付宝小程序中依赖 [canvas](https://docs.alipay.com/mini/component/canvas)\n\n## 安装\n\n```bash\n$ npm install rax-canvas --save\n```\n\n## 属性\n注：\n1、**支持**列表中的 <img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表 Web <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表 Weex <img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" />代表阿里小程序<img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\">代表微信小程序\n<img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\"> 代表头条小程序\n\n|**属性**| **类型** | **默认值** | **必填** | **描述**           | **支持** |\n| ----------- | ---------- | ---------- | ------------ | ------------------ | ------------ |\n| style | `Object` |  -  | ✘ | 通过内联的方式设置画布样式 |<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| className | `Object` |  -  | ✘ | 设置画布的样式 |<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| width | `number` |  0  | ✘ | 设置画布的宽度 |<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| height | `number` |  0  | ✘ | 设置画布的高度 |<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onClick | `function` |  -  | ✘ | 点击画布时触发的事件 |<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onLongPress | `function` |  -  | ✘ | 长按画布时触发的事件 |<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onTouchStart | `function` |  -  | ✘ | 触摸画布时触发的事件 |<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onTouchMove | `function` |  -  | ✘ | 手指在画布上移动时触发的事件 |<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onTouchEnd | `function` |  -  | ✘ | 结束触摸时触发的事件 |<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n| onTouchCancel | `function` |  -  | ✘ | 触摸事件取消的时候触发的事件 |<img alt=\"browser\" src=\"https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg\" width=\"25px\" height=\"25px\" /> <img alt=\"weex\" src=\"https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"miniApp\" src=\"https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg\" width=\"25px\" height=\"25px\" /><img alt=\"wechatMiniprogram\" src=\"https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg\" width=\"25px\" height=\"25px\"><img alt=\"bytedanceMicroApp\" src=\"https://gw.alicdn.com/tfs/TB1jFtVzO_1gK0jSZFqXXcpaXXa-200-200.svg\" width=\"25px\" height=\"25px\">|\n\n## 方法\n\n### getContext(type: string)\n返回画布实例。\n\ntype 默认值为 `2d`，目前在小程序中暂不支持设置。\n由于微信小程序新接口获取 `canvas context` 是一个异步行为，如果想获得设置 `2d`/`webgl` 的能力，则不能使用 `getContext` 方法，需要用户自己兼容处理，具体详见微信小程序文档 https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html。\n\n## 注意\n直接指定 `width` 或者 `height` 的优先级高于在 `style` 和 `className` 中指定的宽高。\n\n## 示例\n```jsx\nimport { createElement, Component, render, createRef } from 'rax';\nimport Canvas from 'rax-canvas';\nimport DriverUniversal from \"driver-universal\"\n\nclass CanvasSample extends Component {\n  constructor(props) {\n    super(props);\n    this.raxCanvasDemo = createRef()\n  }\n  componentDidMount() {\n    const context = this.raxCanvasDemo.current.getContext();\n    context.fillStyle = 'red';\n    context.fillRect(0, 0, 100, 100);\n  }\n\n  render() {\n    return <Canvas style={{\n      width: 750,\n      height: 750\n    }} ref={this.raxCanvasDemo} />;\n  }\n}\n\nrender(<CanvasSample />, document.body, { driver: DriverUniversal });\n```\n","engines":{"npm":">=3.0.0"},"scripts":{"build":"../../node_modules/.bin/build-scripts build --config ../../build.json","start":"../../node_modules/.bin/build-scripts start --config ../../build.json"},"_npmUser":{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"},"homepage":"https://github.com/raxjs/rax-components#readme","keywords":["Rax","rax-component"],"_npmVersion":"6.14.4","description":"Canvas for Rax.","directories":{},"maintainers":[{"name":"zeroling","email":"wssgcg1213@qq.com"},{"name":"wintercn","email":"csf178@gmail.com"},{"name":"yuanyan","email":"yuanyan.cao@gmail.com"},{"name":"recover758126","email":"761647716@qq.com"},{"name":"rax-publisher","email":"rax-public@alibaba-inc.com"}],"_nodeVersion":"10.16.0","dependencies":{"@gcanvas/core":"^1.0.0","universal-env":"^3.0.0","rax-find-dom-node":"^1.0.0"},"miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index","main:bytedance":"lib/bytedance-microapp/index"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"rax":"^1.1.0","eslint":"^5.16.0","csstype":"^2.6.4","driver-universal":"^3.1.0","eslint-config-rax":"^0.0.3","rax-test-renderer":"^1.0.0"},"peerDependencies":{"rax":"^1.1.0"},"_npmOperationalInternal":{"tmp":"tmp/rax-canvas_2.2.1-0_1599792724087_0.02592735773602972","host":"s3://npm-registry-packages"},"_id":"rax-canvas@2.2.1-0","version":"2.2.1-0"}