{"_id":"@bizcharts/rax-canvas","_rev":"23-82d26a3a2f797d7318e33466d954600f","name":"@bizcharts/rax-canvas","dist-tags":{"beta":"0.3.2-beta.0","latest":"1.0.0","beat":"0.3.7-beta.0"},"versions":{"0.3.2-beta.0":{"name":"@bizcharts/rax-canvas","version":"0.3.2-beta.0","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.2-beta.0/build/index.html","publishConfig":{"access":"public"},"gitHead":"238e31245c70e3416d3066c8b0031fc5210e3d12","_id":"@bizcharts/rax-canvas@0.3.2-beta.0","_nodeVersion":"12.18.3","_npmVersion":"6.14.8","dist":{"integrity":"sha512-4deuvuEHcy6shlX99Gdd2y/+vtWArMUtQXfKp2BFK0vIw0efw1hGyudGBcBewJLsQ6HtBXDWNEAnZGOajc3K+Q==","shasum":"26a9593cb1281f727be6d1f2eaa90aac5dd94013","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.2-beta.0.tgz","fileCount":36,"unpackedSize":749821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWGZsCRA9TVsSAnZWagAA5P8P/07kF/tT0uV5lPVKMvYx\neW++RU5dsuLcehAjy3PafqSPmNQXwfxNm69eCC8WlFVFymOt92VXoV/hZDyK\nME1eX7o9oBQPrrMPu7QLlaAK61aszZy5lZxHaGtOqY9elHQbaCi9xrvbQEuQ\nKo590AT/IHifbfWo3AMprxBkBpDspxgBxSgyiV/FbEBvkfn6rfjLQcW20Rsc\n6pZLnlgcKQScsGC0M5XKbFVJsDNgHMeri9pr1wSb2bo18e9AU1Jy24Zd5WD1\nIRb3SDrDUW4bl1ikMI352bAmiGQJ1lsLrKhoLAQ5pHg/w7HGaH0SFC6L1C6m\ng6zHVqrRk2wQLLjDkoISuqAZ6ppSYXccqYil1caGLeH54zGJnbRS/kLdZhvz\nYK0m0oA3M7llh69cyswyLQ1Lf2QE4BSnINHUC2CQhb9wzNAxXXyxyG0phLF3\njyLrki/T4pSRUcLY3auqMzqyJoq1wg0IycgcqG7Sec9Xqsbrd4GRkTzfsuRl\nrCAoLZBl712Wl7F+g9pNzrvR5hRjQwRHbqIYKn8Hv5//X3qptgz5uQDGr+eL\nxJijeItW8JdXYKt3ZbtcfTq/kLGlAB7cmhHRkNEkwBOBdCQSiFo30WY2g5Wg\n717rcaQ6j40ultr8Mc0N8iGYc8+L1sL3qBJVhlUVPb7uWcfq7rPRpSHSdyH0\nwv7w\r\n=gOw/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBw+RH+oe7JxMbXAWgstsF3/u0dE2RlD8spARDQF1p2qAiEAxDT4Jvqq0pHBn/lyJTxKX82reyXQwxH/LewGtG4j9lA="}]},"_npmUser":{"name":"leannechen","email":"811873539@qq.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.2-beta.0_1616406124191_0.1811164153882685"},"_hasShrinkwrap":false},"0.3.1":{"name":"@bizcharts/rax-canvas","version":"0.3.1","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.1/build/index.html","publishConfig":{"access":"public"},"gitHead":"238e31245c70e3416d3066c8b0031fc5210e3d12","_id":"@bizcharts/rax-canvas@0.3.1","_nodeVersion":"12.18.3","_npmVersion":"6.14.8","dist":{"integrity":"sha512-1zbmjZ4L+djz8kNlUAYQs58B8IH5dKDp56vx12Sv+DMY0qkQFtipSoqr77bxggCF/do3R4I36FDmAYCWGCgyTw==","shasum":"d8342415af06b40b1ce4a79011f767f808568254","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.1.tgz","fileCount":36,"unpackedSize":749800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWGbgCRA9TVsSAnZWagAAn9gP/2tpunCfR+Lf5k5VJAcH\n9/JDwTx473HaCwEfyMeI8M+wARwcxCQ4YIz7UqvbFSK9NiK8kx8GarRPJ7et\ngbj0VXqoqwYaF0rvpDvnaLQktwv1dAgIddEEjpADQAzZXNk0hIV7VjqZD0it\nH7O3EVSIOhWv1t4VF10/fxv7gHDJt2loV7Hs9sNE68AD2KQJJ3EEemcvUaf9\nfcGuV+tkRceA07zDhH2h+GdfvWoW/lgIWvK4oAdLe9yYeHVe7h4z2xKIcJov\n0U26xw+FNC9TvWDBVO+Oka2SxI8za9XX7WlOfdG6Pc4QLhiIJOMC37DpB1Bf\nUeQj9vZu/i5jLj+1D+6TQxzaSceL0nKGzek1gLiLlN9EIJLKgZ6OIwZw/mAx\nnlQ6xNVSXAVtW9rbTe3mS9EnyzrY58XqJ+mqa5Okk+J3yq6d1dhBV/vCYqpS\nq1lnFk9lyix4rVRn8u2XEZcRYDXv8raL5wX7cVjf50WRn11FCkrTAYAo+CMm\nVTh8hOqI8hA10tjwpSzYQh/VnB+QMdZJ/HKt75DKDcA0fBGN/YYW8EslLrUr\ntOADxeeyuJ5I7SYXfUmyo97xYX/QoevB4nRaBf2vnHzLSIZ3ck+VeO6MRz8h\ngN/49yPkqON6PEMQyQ2MpUsIogtx+wv1KtKw1JVGWNrzOnl93uCRH7292HXO\niMmR\r\n=fzI8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo50Uuq7lHszq2WbPwVpToPpugfpyEdLbFUm+8+K4AhgIgDEeIlOicdnlKdjQ3eYRhqkWPZM9yrm6j6539fYmVEYk="}]},"_npmUser":{"name":"leannechen","email":"811873539@qq.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.1_1616406239946_0.9305264091030347"},"_hasShrinkwrap":false},"0.3.2":{"name":"@bizcharts/rax-canvas","version":"0.3.2","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.2/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"gitHead":"238e31245c70e3416d3066c8b0031fc5210e3d12","_id":"@bizcharts/rax-canvas@0.3.2","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-X5t3Afx8BAsOGijLkaVnRrj1diTG6ucM+8feYHeyNOOlQUmaoZDISJ62RmrpXhcEKjipGtUz5RGYhEfiKVSgIA==","shasum":"0fffb85d8d86a9fdc936da97623a1f650db15d0d","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.2.tgz","fileCount":32,"unpackedSize":762234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCmQzCRA9TVsSAnZWagAAPlcP/iKqKEJmteO+WnCRmSHM\nxsgMN+PX15GiX6fe/GstGz6Ax1qJKh3Wg/FoQ+pYg301puprx+dN3/RdS4cG\nbymTaUV98+7qJ8VuRKWMmHHEkcbEPBxlqHQxltauClVNKIfZ6JSYMecYdGlp\nbSpNnl+zzHvSUSjPnEWEpvYPNBc0uYOQBBy3Jz5jic1HaHXw9aIVPcZfv0Ra\nc6/oY05cLCbOf5cPxTRIpt4/oDzsbfwkkbrwFPXy2UsrfLKraPy7cUqAwRhH\n104A/PWG8VfbCwtl4g7rMtX/0N7WhptPRRXxBMEKAn3X4AnGT4ZLb2+9fEZx\naLTgqgyWMu5tbb65kDgjA+qMQD6xZBX+t8ZXu776/kkfct6LgdoegOARi4g4\nXqPla+yOlbH+gstkEnqMbATRjosbmUJHi1HYoZf3xqgc2dU2ihf6zaRRCBjP\ng5okhZslOUFdC8XyIi35cLwEbORzxs97p9xN3Y93NQ562StWA++2xEfvR6Cy\naHRMwpxAur+Y7VBR135QpgCaVcq6QfC9i5tqbeTj1NhRVlHl/gTbRg4Ij21d\nO0vX+iGKi9Chq9WVkJMf+vlKb7aCez3gHaQ39fh6G2sL71TYR04LBXjWrsmj\nvVBTa8ozRagcEf4Lp7hGGO/RdxP7sYQAvH5YGzTMwNBnjrSiLwIBHPD2CH9c\nFt/7\r\n=vnZz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID5kq3tkziEGGKVhp4u0dtn3BlAIchNG/zhOsk/lLiIiAiEA7rrZ44PL0zaapV9tcEAswHW5wAhFgrL4mhpAI5mTMg4="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.2_1628070963277_0.8150892032521384"},"_hasShrinkwrap":false},"0.3.2-beta.1":{"name":"@bizcharts/rax-canvas","version":"0.3.2-beta.1","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.2-beta.1/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"gitHead":"238e31245c70e3416d3066c8b0031fc5210e3d12","readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md","_id":"@bizcharts/rax-canvas@0.3.2-beta.1","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-25bOvR/GQz6kJDxrvXbTjJ23FM0MZ+SZj48uh17RZgtEiThcPl5B7rQwxZFoBTEiXm7icVDuJRUYEGh8DUypLA==","shasum":"d263a3c2656987160d1be7b997c836e22a05dd1c","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.2-beta.1.tgz","fileCount":32,"unpackedSize":763983,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwbOET67ms0+Q+HyJRr6B2eI5Hkf6qjxUK4Kv3ivhPnAIgGU8v437HnK0WPqdFgT1PdYn/qQN2fssrc1pCIrm3zCE="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.2-beta.1_1632642982466_0.5712305706270795"},"_hasShrinkwrap":false},"0.3.3":{"name":"@bizcharts/rax-canvas","version":"0.3.3","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.3/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"gitHead":"b721827a260992741a1d1953ab4ca4735a76d3de","_id":"@bizcharts/rax-canvas@0.3.3","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-5gg9gtJl3dV+ZX0WVjn5ceUH5D6njNyph16FHlRED0VWFJVs36h2jns6nG+3V9cy/V69pv2QM5udW5S+bb+vvA==","shasum":"6edb78c453b99d600ad9a839877f46256df4bcc0","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.3.tgz","fileCount":32,"unpackedSize":763591,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4cZC3P5sQGVG4q+pBFjaEdSl6bCWe6DNzeKemw8ncggIhANbYZalCOGnShm3GppXd9+KPsehpdBhJOJoUuUcLDVBj"}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.3_1632643634435_0.5970347359432775"},"_hasShrinkwrap":false},"0.3.4":{"name":"@bizcharts/rax-canvas","version":"0.3.4","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.4/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"gitHead":"7919fac16e9b1151e1186447e00f86ddd448adea","_id":"@bizcharts/rax-canvas@0.3.4","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-j5FLygowCsi0XBUWEf3eYYfSsTD3js5KQlutgrfKWjetcOICN0VEHd2N+jY5P0VhZk9BBL9Iiv8XiAvMRrJhQg==","shasum":"d219312e3d2cfe400375104b28d99b93ad8d7fbb","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.4.tgz","fileCount":36,"unpackedSize":769232,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHJk3sCquPnpH+MVOLxPp9+NrqrIYYtU9r23bRJAsW2AiEAyw+SxAmYxahPUhMLQt4LwHmOVe8Td0gu8emNxz2wSmk="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.4_1635234549561_0.7322667210551435"},"_hasShrinkwrap":false},"0.3.5-beta.1":{"name":"@bizcharts/rax-canvas","version":"0.3.5-beta.1","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.5-beta.1/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md","gitHead":"7919fac16e9b1151e1186447e00f86ddd448adea","_id":"@bizcharts/rax-canvas@0.3.5-beta.1","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-GwBxmfLBeQ89fypf8WHlMhUDh2zvH8uPelGKltCpGBPEY9tJfB/2QgGGGv0RCwFLH3IfRUX6wUuF1T+NzYjxNg==","shasum":"eaa1ae80fb8ae052261a71e12e9c47658a7900d0","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.5-beta.1.tgz","fileCount":36,"unpackedSize":769297,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnPFlcsFXNBaaasY9bRJXrvH2FracUccuKMxdtKcBDwgIhALybAZFzugMKtseDlyHzFr3H+z8U1nSxs6JM0qs7+aHn"}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.5-beta.1_1635324849681_0.47197307555730417"},"_hasShrinkwrap":false},"0.3.5":{"name":"@bizcharts/rax-canvas","version":"0.3.5","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.5/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"gitHead":"7919fac16e9b1151e1186447e00f86ddd448adea","_id":"@bizcharts/rax-canvas@0.3.5","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-sOhgXclcKn4NPgCloQC8YrIzlo6YMy+9mkhneknEhn0WXOQGeieNXlorjxBeXwqynLo+QVAgOzOJnomJJUuR4Q==","shasum":"cc6a37042bc960fc5c605a18a9b7aa5edc95e51c","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.5.tgz","fileCount":36,"unpackedSize":769276,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqTl4RF2ybWkzhIBaW2qPBHto9h6IVJxaVC9+MtsEnzwIhAK27v+2o6D9lRbWzpwmpTFGGvNUc6Wh6/dFkm9LU3Znb"}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.5_1635326443988_0.4484475559674348"},"_hasShrinkwrap":false},"0.3.6-beta.1":{"name":"@bizcharts/rax-canvas","version":"0.3.6-beta.1","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.6-beta.1/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md","gitHead":"27ceabf436ebfd6b376fb24ae349e76dbf124fb7","_id":"@bizcharts/rax-canvas@0.3.6-beta.1","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Drr4amFBRcxtirraTURgwt7RuIFVpvoDnw8E2VsVv2WMBZ2I/To1jL2j1YCbm58e1x6noqY6YIyj6jcMMG8ESQ==","shasum":"18fdead7bdc2330a5b3bb0e7c38b6f2b539b3423","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.6-beta.1.tgz","fileCount":36,"unpackedSize":769297,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCY+y5OrVxVV6Z7gRAZsecmWglqFpGTiyLvebvHXD9zxQIhAJRkrfC7yLc4mU38tDUjs0phEC4/t6hBC2L2pqE7w/+l"}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.6-beta.1_1635391647373_0.687155057284722"},"_hasShrinkwrap":false},"0.3.6-beta.2":{"name":"@bizcharts/rax-canvas","version":"0.3.6-beta.2","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.6-beta.2/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md","gitHead":"27ceabf436ebfd6b376fb24ae349e76dbf124fb7","_id":"@bizcharts/rax-canvas@0.3.6-beta.2","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-JpN6KKGpPFkzCMXbwGRuHgUAY2aST9uhRM65538nncpnKDe5Zs4yTA9ssnLRhqjfz5q1h0V3TwLF3u7sF8Ljrg==","shasum":"e4612d05d56054b997c7cf231d809e2a7c6709b4","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.6-beta.2.tgz","fileCount":36,"unpackedSize":773992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnUZ4jCoefnovVhyqzaAEknDy0xn6y0qasDwNJA86DpAIgM0SMhNIaazbZP522a8osrX5fV6Npr+LrlA7w3trvNNw="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.6-beta.2_1636425084352_0.5477274820757239"},"_hasShrinkwrap":false},"0.3.6-beta.3":{"name":"@bizcharts/rax-canvas","version":"0.3.6-beta.3","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.6-beta.3/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md","gitHead":"27ceabf436ebfd6b376fb24ae349e76dbf124fb7","_id":"@bizcharts/rax-canvas@0.3.6-beta.3","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-wTQ6pe4plFPqbbbPNmFLXj5LNR8dC70PRD0tSNDH4IJDuU8l9xOJoehUs8MtN4s6zdtd6XrNaY7AaSZFekKnvQ==","shasum":"836ab984c504786f89b22ef81232c8d76f110ce4","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.6-beta.3.tgz","fileCount":36,"unpackedSize":786148,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYzWRFH0ES3AchRhFKWVV/gt1YEpNnYo4YrTK1gHMnfAiEAncD8L9P7qgrRoKeB2+DEZ6XIXceOOKA5Zx/9j3XMwGM="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.6-beta.3_1636979745361_0.387059884849839"},"_hasShrinkwrap":false},"0.3.6-beta.4":{"name":"@bizcharts/rax-canvas","version":"0.3.6-beta.4","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.6-beta.4/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"gitHead":"27ceabf436ebfd6b376fb24ae349e76dbf124fb7","_id":"@bizcharts/rax-canvas@0.3.6-beta.4","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-O6AENtW4wKmj/r3K8PyZ1sRQxo0otWWwNU74sjwvlCqrBobzwQq/fzjlfn3LqiB0Jk6P/HDzAU4tcN/Xl3DfxA==","shasum":"c8ce44bdc3286aecae20fc71cfe3485837be4811","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.6-beta.4.tgz","fileCount":36,"unpackedSize":786236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlcA1CRA9TVsSAnZWagAAuI8QAJDVm+fPOQDiWrDCavZU\n+g/CkXxpJFfQdf9dTMO888ob7hWLyXkRX5EYlIko1AcxXvb7zx4bYFv7eMbH\nLzQWj7/ngIL/uNiws0GQisgTSxaUMvS1dmvr+6xx1Ml/XN7EvDGZxoI3sdN4\nIbxSUZ4ujbdiXDQzYQsZUWH5JbivzQc0Mr2II64lS97Sgd2r5w5F0oKstMgw\nGlLacg29zPPb6Hh4b6QsyDzYgVRHY9jiUgH65ruuNfPO19tVn94DGJ2pd/qH\nYci9Gj+uYR6us3heUIb+sBO+ntzRmJFI3hX2QPoCAVcFIgZnyG3MENOznBnm\nPPPmJyTwRHA11WAzbdqtJQj1B0nYHao9jxoRGXApId7CcONzgu3T26IzJkA8\nyQX00DsaMCIYCRPUqz6Mffg4j9FKGyP9HG2tgnWJiS8d3XQB+3UUy41JCCmT\nDiug2pTZhoQDih6YRwkbpsfbmjDFKNped7O5ArL9QsQOdjEwbZgubTXmAZ+b\nFO8NOTBra/QYPvYnlf46qHDmxjQQz3y4sm2JJjCUlRS30sJkbL5euSuF2DEJ\neKwNuW2KlhZmeMuZSmB9hIpSvERiKgOOkb363co6ESLbP/Zz8kQvTfVSbghQ\n5Hk0o9Ev5cSqa+vvclM75JLZCsoJQv6+o7A8giBEGzvuM7q4pro4MV/ZkJmH\nE7/O\r\n=S0t5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjNhGRWHyWYKZrft9L/YRgsQk75PTbCl0J14Lh7m0/FAiEA4JLdmJewG5/7TbVWvDe51E0SqaMCkygldhqsNUi1crI="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.6-beta.4_1637204021698_0.7996787383712409"},"_hasShrinkwrap":false},"0.3.6-beta.5":{"name":"@bizcharts/rax-canvas","version":"0.3.6-beta.5","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"engines":{"npm":">=3.0.0"},"scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.6-beta.5/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md","gitHead":"27ceabf436ebfd6b376fb24ae349e76dbf124fb7","_id":"@bizcharts/rax-canvas@0.3.6-beta.5","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ggDN2Eyqsoo8TkWac/puWVRnAsnGH8Y0ENjWOa5BmK49jiXloVgQr4wezDHJ4fohmjBdV035Oq3E85KS1oBaPg==","shasum":"e45ab35dcb9ea5a33395d7cff01d5a1880fb776b","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.6-beta.5.tgz","fileCount":36,"unpackedSize":786358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsJZ5CRA9TVsSAnZWagAA9P4P/jrWLn4JmWSUmyCPylbk\ne/q5MIGI0LYQcxkJC/mZezfGAbf/k30YIZuI0zgJ/O8fr7JsAxci5QPoNhsO\ne32ih5Cy/mZ7AMAFsENXevp1pDjFJVK+4YjlBxtzrdO1dxkAJk82skmdEXIr\niYQIwy4fitWdcFtk0jr51Lfb/o3ZqLIYcGnGIxmH9pEqmYpEJl3Gc2IdpNJT\nZ02QOlVh3sFUeBSitBF0fRzLFElXyYAIffebVSG/MEPPOGQD4WtUD9qHLTgC\nAalme414JDJVzd6XBjoq3d1n9SlXYxujQyMe2MkMu9/gKDINetPuBlC7EmBv\nyA2inZ1tot4NSzInrLbT9FbdLcVpMIJonpOwHxP1Q4KAhI+EgelzYhCsQW9w\n7CAyHy4UA8Nrrd/P7ARZQ7f4knuFJ0q0HDvlvfKBEOe+uGesGbN0DpBUYcIK\nseqjduDfez07BRMsKMcS3mmzaGcBQHUKeqw+vI/SPN/b5UCIiVLBnG5RIkbp\n4yX40HsUHvNZhLx2b8STSCSUXADXeT8PJXt2kFjTJu5JwvXdepaDXgLjMLlN\nTHTsvqOu37kWpIcxELl6jtAQYQx2SjPyDwFA7V8Xz0wItAwlKFdVizRmB15q\n0Mp3djrPA7dPmfL/XLYIeEUlSh5Npp9EYOtGaR+IQ+IcMt0DpnEeQR2fqE9L\nLFIn\r\n=nL08\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXx6GUCiSoFaJ3rHZ5uCs5AzQIXZURczi8xwpDJ81q+QIhALadI6eeZzVgRhVMpZfKxI6BjIV7CL5rgZjw2rd46nuR"}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.6-beta.5_1638962808948_0.7097519571792421"},"_hasShrinkwrap":false},"0.3.6-beta.6":{"name":"@bizcharts/rax-canvas","version":"0.3.6-beta.6","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"npm":">=3.0.0","scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.6-beta.6/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md","gitHead":"27ceabf436ebfd6b376fb24ae349e76dbf124fb7","_id":"@bizcharts/rax-canvas@0.3.6-beta.6","_nodeVersion":"12.22.7","_npmVersion":"6.14.15","dist":{"integrity":"sha512-bc24c0/fTJ8tVl8w93OjQ/DHgbRUbCZPC/eOma5zrzVfC3iFvpEqVKxraoF3bI0ZnHPpf6Zu0lGzm9hGJEYnEg==","shasum":"8ee5346d2d7b3e4e6d27e5704e06471c223ca341","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.6-beta.6.tgz","fileCount":36,"unpackedSize":786256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiC9CDCRA9TVsSAnZWagAAkH0P/RpTi1z3ojNxg7VDxi5K\ne08gQseHJRUmHOUwUMNWurIgKj4ODKFVo5Q4WEsQrRsvryOphfLOf1ssOFGc\nkbFoC9Q77stkF/SxTw39W/eP7W7cyYVTgL2Rgeson53jl5jSqjtw1dKkFapf\nifuB+zsRUIDeIml9z9FvlYz9rczbFJ5heqXVOyOfuZb/sgA0J0w8fwBxt3kq\nbXm1UQPzYXhlQjKWbHK5LnRpQxoGXqcerES//EVEkrcTt9MO4SBtKe8nm+pl\neu8NN0uCeAz+CwjQJ19+ThXSr2GWuqCRnOO7uxrQgoi3lkKLmPt/Cw+1CVLf\nG4wSOxufEmidav/nJD6bFndJc2onFYh/3OJ6Uk3683dwRoiJrM12xi8auV3x\n910ujywx/7YhawQPARywRWcR5n7zeIT0fB+6NDd1D9k2e4vKMO+4mfC0PY3h\nyT6I5fnEToOOW1f/t8Foh7iWGY9qMTp3KZM5rQQAg/EMM5D1TNhjiK4qg8xv\nVZyXvceI1R7aW2r4fNjbbOPcxjwaEb/+Tcz6dvC6Jjwyc4EeUx6PfQbqkaxs\nDJuph7BnvFzJP/INToDuEHRrlPU3nX3xDgy/YVaXPDTTUY05PODQzQuL5uc1\nale2kYMXq5GqDSRauF06FeTHR893PAeOm7zTUSnZ85fT42YUswWScf17x4D2\nYYwo\r\n=GEQJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAmaR4FPKuTGN4Jv8hO4GN8LHbzcvS/PPbojvtI3zinmAiEA8qslD4h4MXbI+kSlrtMAsZY38jHijUmoKN4PlSCs4sM="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.6-beta.6_1644941443094_0.45794905561647514"},"_hasShrinkwrap":false},"0.3.6-beta.7":{"name":"@bizcharts/rax-canvas","version":"0.3.6-beta.7","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"npm":">=3.0.0","scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.6-beta.7/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md","gitHead":"27ceabf436ebfd6b376fb24ae349e76dbf124fb7","_id":"@bizcharts/rax-canvas@0.3.6-beta.7","_nodeVersion":"12.22.7","_npmVersion":"6.14.15","dist":{"integrity":"sha512-TgfTtlxISnYcMZjfNL+TEuTejnj01ek9soAoIqSnINnwvBmso81j0N1koLVoh1yufPHyGoeUooxXrt7MXmje/Q==","shasum":"2404be372b7eb3305f5de2f4e31342cdea713625","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.6-beta.7.tgz","fileCount":36,"unpackedSize":786632,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiElGIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrbjg/+L3cYug07d/0iaBeQgPWR/6OsJC1BXRaOwpraSfZ9uZZON+MS\r\n6ObRYvtzBjvwkkeXc/UlbBqmJd5R2VtYtsitDxnfh4gOwlPip81AxXsiEYn8\r\nMnUWRldQfpCfGcu6E3hjV9GD0bL0LlwKvB12tuNLcD+RoYYZRat5K1YtZPpY\r\nEnWAZRqVlnLelmZ9yELVpAG+zShN8V2QPTY2UuNWUm2rB8ndtsMe09t8Fz1F\r\nptXzNkfBb/LiMZhuGpsNLStLvEtx6rD4YZ6+qXSdRCy+pbh4IcfaT2VqpVdu\r\nNueagU6SbLFPdFDA40wVyLfOuUT1XMpM3g6h45gucycix1irvKAu+ZFNl4JM\r\nTKwNkvBdMAEmCod/b6l9CHtYj8gfOn0mPsn8fZ0eVYerHJL3sPc7vT1vcrVm\r\nyqt/TnZFyWFxfglT+hka/obFPIkj6CUzXrCM5LGD9gnDIldsNvARdp+zH3V/\r\n7Hmko/1A2OKarpdPUgqYzrOoyHrenOr/Owiqe5sgDPSu9853k61HIeZehdIe\r\nMYOmkqShghuBMfNxSjwPXwWF+u8CEFXtjD0plZl26NGRXh7ImhkjgaE5wBzl\r\nAeQcvFeUBFVNPLZis4m9eJc5optteXXi7di1G/kF/v+/HsBanMzeNerw63Qe\r\n9AB98EHuLolxamyF+IgX6TjqtgjVd82YanU=\r\n=j+ab\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEREclF2dgYrsxS8I+bAHKD21FPF0c/reR8ygDYyRxLwIgObeb+0bpexhlBrY4KA5gjPHHAcBWRsG3xY2sEUMhe5Y="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.6-beta.7_1645367688678_0.8010301839237808"},"_hasShrinkwrap":false},"0.3.6-beta.8":{"name":"@bizcharts/rax-canvas","version":"0.3.6-beta.8","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"npm":">=3.0.0","scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.6-beta.8/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md","gitHead":"27ceabf436ebfd6b376fb24ae349e76dbf124fb7","_id":"@bizcharts/rax-canvas@0.3.6-beta.8","_nodeVersion":"12.22.7","_npmVersion":"6.14.15","dist":{"integrity":"sha512-nS90TD5fzFrzVqadEkjx6RLXO3jg8W+Wq6JdkzFt5RFP2JxyLqTsimuA4T21AdpFxVjbsURILppuL9zwH5QHVg==","shasum":"ea2ee5a76631a9010ed1bf06688152e3dfc3660c","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.6-beta.8.tgz","fileCount":36,"unpackedSize":787990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFxR2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUlBAAjMymTo58wNmObXJfxlVZ3kJqQwXgbyA7nrR4zL/JoXDs64HD\r\nhghksp9LYSoyfHUNogk9fI6LVqkfK9Qo5PB0sQAodwYk5LLUuyQ9bbh9y49e\r\nviu/U55nQIkP5LKH4Vrk/yEUQxiTQ6HZH2heHk3i/yBkk/IsJp0YjepNLWLV\r\nTZnrEG/uBg9TtvAee9FfKtOzpJH4xnWFp27kSwVgQiixApgrls6ACD5an7yP\r\nBjuZDqgTPMjKUB1qBcJsCaFtLbaHLhFyEBBHvwrkQX3EWSksoaWPYmxNPLSk\r\nNUSEahLw9xgm3dWcCPBF41zdDYYHRxwFmo8e8LjSIipuQlku+Y9HsMr7Hv5q\r\nxoL9Ey5UcYAkusx91eyzFFVqc+zmVRWFJDCuWEGc8yp3J7sO3HEQqlOPNNKa\r\neHPU999xmeatHPWHRh0Jn3xvSpfdbkl7JGsda4Aqp3pbXz6lUPk+t4K5diB7\r\nLm+4SpK7lFL3aLSMBYX3MrzfEV1WLVnuq8PdXyK9j6ozfF7WSYng4QAMshyu\r\ncR1VSGZhVIfnMwVpeoUzJu+qlHNUyvwOPcD7pmDXtmqgA91VKYx7+PgUQZ22\r\nAVssyKPPXwfeVtYeCWbA+ma4nPUVIWerPSeTIpumAZyMF+c02H1TFGxGnz8u\r\nnuzQ/5C2qrNKeW5EoYZeCtibFu31qwyLnhA=\r\n=LeHB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHhqG1fEtc5MaH7YcXnHCTenNFGRV9Xk9jDJSb3/+CQ+AiBmT8oIP9m6u6IuSFzpk4m3cSJwYf0DRr8l1kvE3CVdwg=="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.6-beta.8_1645679734168_0.3939758245716869"},"_hasShrinkwrap":false},"0.3.6-beta.9":{"name":"@bizcharts/rax-canvas","version":"0.3.6-beta.9","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"npm":">=3.0.0","scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.6-beta.9/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md","gitHead":"27ceabf436ebfd6b376fb24ae349e76dbf124fb7","_id":"@bizcharts/rax-canvas@0.3.6-beta.9","_nodeVersion":"12.22.7","_npmVersion":"6.14.15","dist":{"integrity":"sha512-7faOxG4294tKJ8n7Qfj2AVIOxhQrkvRZSGRI14ZGABPsJcviNa41eGOf4kW5+BZROu8abXD05iKy5zh7hw6Hvw==","shasum":"b19336e1671806f87cd346ea657935f931ab6478","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.6-beta.9.tgz","fileCount":36,"unpackedSize":790233,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF3KfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0zw//buaek+CWrp3DH42azMLWM0VeVewGuK8DabD6VHMuTIvBTBhx\r\nEfniE1/rqR292orRpTz1XWMzCTXRxT2TQDbGNoQJp7wCUPbp+syVf4Djk4uL\r\n4QBIbXintmlwVitStlX7vcUldNb2LfDKhqANpEOom5OMPe8F3NOSaDqOyKNh\r\nh3opNN77g9dAF+VhlN8wjoSLsUqbjen3hcHrxcg/r6IDoYqWx/6x/8BaJwQb\r\nDlAN4bwHCoKrJrdfbWH/6aVH2mTFdELwfiVsxtaZx/PIVFgdpqTHvu30JsNT\r\naYE1uY5oueDQMfQvK36/iDtulOZy7ZZKOayflm8Zn/Z/A/g/ercj3rEfyPcU\r\nX9/6aNnS65JzNWJKzSYhlSqoZnb/qORR8FlFirVpkKryt4tq+PXrGJ7he8xw\r\nvfgFTU0pkbZf/dziaEdIpAYDUgp5mVdTZIfgHZaGvxKTRrnaRFGS8FxylpI+\r\neiCjgUkMF0qzdn8Ou+emICxSR8BIyoggu+trut5UCLk7JjfPI67tJoL/EjwR\r\nGHpdlqCAV5P5bVeQ/7O6iUviPD5d2WQF+CZ+E65mA6xbuE4UBetsQ4q2Nn1h\r\nGMyNA3kKoGfvIKwzxiBgu8JhPxy+9dw2aSYpgfeVHOGlz9Mrvl3JdfvQ9ta5\r\nr1WKExClsCr+Mr1P2Pz4OdmNAAovYs9I548=\r\n=bW/e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdfvrWhT6mRcRiYzuygk3hYG7sFWzsyGe0O/oYfJdxSAIgIVDABeT/6Ms+1ZvoUTfpPGXKrWgIG8m3pvSrQq52XKw="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.6-beta.9_1645703839359_0.8897367778537668"},"_hasShrinkwrap":false},"0.3.6":{"name":"@bizcharts/rax-canvas","version":"0.3.6","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"npm":">=3.0.0","scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.6/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"gitHead":"1c57261d5bedb6807b3a02fbc4b257150f1e29b1","_id":"@bizcharts/rax-canvas@0.3.6","_nodeVersion":"12.22.7","_npmVersion":"6.14.15","dist":{"integrity":"sha512-Bzrl2A8srPoSbzXpAMJcfFUAJ4tOMX/CVBSqHEZ9SV9sm+ZG22X6feB283+bgTGzdC5BdldsVYHYRk3r8ovygw==","shasum":"1d700534ea3b49b4be5f56350eb068b00dcf7d59","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.6.tgz","fileCount":36,"unpackedSize":790212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF4h8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMyRAAjwbSglAdwTEdeg4ynrMU7QSe5RLfkhQk0OgcqqdOaefwQXLa\r\nIbp/jt8fN39IJghf8k6PxY7xNZ3/JMWgEz8yszA/r+oecCrYGknUOtyqmG49\r\nXop+2+7PwEBIh5O1MSWa+1SkbYGXef2hHFFWbL0YB56JpOkSEeMTP2KbzrEd\r\nciRzhgA2/DFy2xEaC4kQbNQfmG9Mx/HO+c7Afqpkym8EE/Woj/j2xe/4rrow\r\nP4nC5eiWGQMQIUQl7u1XvdoZYDlmAU4KJ6A4aNQG8209b6Jlyb6gKBqizj/W\r\n9R7EzTgLp3aa8rAeV/NWuegl4b8SjwdA6sW2ecHCYGGpDFLch92wA5032mQ7\r\nFMK9jMhSbqnMqBr1SnqdmQDW2ZmZBjTZFCu1vTpNgrRIcCjTHwS8lc58L2PJ\r\n8cP22LsbMygcjUuqOyirY9rx15jnTCZwhmd2EHWR0pVm/Eu4xW2aMZVvAs4C\r\niY/lFTFZLPTFATq+uJL3eA7QN7NrtkVb6iOwDAoxko2pyrS06TAUYGaRRjYR\r\npJLvAfROiDgW4P2Bj3lCBy5NgL+ydtaoGKBsBm1YyoR9o6zp5+ITqGyQrTN8\r\nkSh6s3CeCi3n5tTlW/v+Tjt3x9rJFkwmc7Wa4rVyuQiylr0qm/Bu555QrwxD\r\nYjX0Nn4rOROooq/XMJSnUnTg23KgFJoIRKc=\r\n=OcQu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMoSQyrqBOZnvCDDdbygxLxGT4m/MIBdS4HBMIC1QuhwIgA9VUwnQW+oVFUbY8ML8XzbYBYfeiPmo9VBRbvdkfGKs="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.6_1645709436018_0.061947639223943085"},"_hasShrinkwrap":false},"0.3.7-beta.0":{"name":"@bizcharts/rax-canvas","version":"0.3.7-beta.0","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"npm":">=3.0.0","scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.7-beta.0/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"gitHead":"1c57261d5bedb6807b3a02fbc4b257150f1e29b1","readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md","_id":"@bizcharts/rax-canvas@0.3.7-beta.0","_nodeVersion":"12.22.7","_npmVersion":"6.14.15","dist":{"integrity":"sha512-K1wCJfPw6fOAZTXb1TBIoRzK2Foz4pKrRbn77FEgvl73QPtvOsqS3/REzcq87tf/NVsDH6NX1getO7yl0ZnKZA==","shasum":"7ea794d755c74df7fb7a81350172346302f95fbd","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.7-beta.0.tgz","fileCount":36,"unpackedSize":792060,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGG5tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPww/9GkqBP6EsKoKoy1xNK9M/QUc7AjIiyzKmCy63uCu2DkMzR3Va\r\nwg7cdF3GYw00uhMY8JyWEDf4P6/RUO5jQ6yXCuwWFIdF/eXOk7NWrnh/48Ct\r\nx8SNU+1WCAzUqoSMHtG91L0aFhLmZAYsnSyrirG8KZj/yqJfXTXdWy4f/WRz\r\nE5NGF5chrLBgDoGZBgGNs0Kn/BGT93KKrxybxGJj5weAMRzwmkWvityu7QzV\r\nbYDOcGAGklUczW4CahkiN8Mu4PgHK0/s+Dbs95U6BVb+J6KWKUMeG5J44/Rk\r\noAxPOiR2/OTCITAddZ7DjsTzyg3SWa7srCuMwoLMn7og8rMDyWlRdQ9QURol\r\nMBOiq0W46S9V1+iCehV3poinszpO7ihvyFxVu+zwj/n1rnNVv9Sxn+WEgxXA\r\nT+d1ZV6KnD4R60do5HAshK1MOy/1yPaPNqETXoTa8iCWD8erWTka63ylMoxn\r\nzPZY9plQ4rh4yKlv6hj+NwrRY2nmOVPqaI31vXfKjXIB2laLlb8/ejCz3hjJ\r\nAflnGovv3p4YQT3goMVmn2xc3+KRoiKySji4Q+l/5LdQn+d2rwi9Fy0RCmZ9\r\nx0U278+BHFOZNVcUib4/JBjreK/ZgoUm8pBnGhLOcLM2nSYcLHEHeI+TyV69\r\nRqckjufrcrugEH4GanrYf798uiuyupy+UXU=\r\n=qNuY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHD0XZSOsHty4tS1UNCc/zpv/bp7qvnEVVQwb819BbdLAiEA4j+lRTPMviwHOukADSQ8womfKV/GPaTh5AXPpKfnL30="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.7-beta.0_1645768301210_0.45042680285825476"},"_hasShrinkwrap":false},"0.3.7":{"name":"@bizcharts/rax-canvas","version":"0.3.7","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"npm":">=3.0.0","scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^3.7.3"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@0.3.7/build/index.html","publishConfig":{"access":"public","registry":"https://registry.npm.alibaba-inc.com"},"gitHead":"f09787312b9db915d60ad586785899fd2a1cb020","_id":"@bizcharts/rax-canvas@0.3.7","_nodeVersion":"12.22.7","_npmVersion":"6.14.15","dist":{"integrity":"sha512-exN+DArWFiGj72V2BRws15STpoRLW0TYAhYid1uiD+OH4Ih1FRTGPRqcSjZH1NGFTHDvo+GI/802h46eDsFNTA==","shasum":"e69e9188ea573e9a6d3a9396caf6e15f01b681e8","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-0.3.7.tgz","fileCount":36,"unpackedSize":792013,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiGHEgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAnw/9EyEZ5JiOLZDyaY6ZKmeCvK6kmu3AtmCliqYrSApccOO/e1o4\r\nGv7GAi2LAaws+j/8en5IHbLorSQ6b70haS1jy564O4koKWYDx0lYAGQubSjK\r\nr/dz7ZtianNXcVdRa2YzSp3ipH+CYfaRrS/w5i6xt8cYk7lkA67x+GKQHD1c\r\nSxVQBOo1lly63f1UmxH/YXgsgturrpYzuk3aDrwywtItjl3dKBGjpo1xY4co\r\ncFbmGsy4357ds2moylzGfOriupSLhObHnVxf2U9ZCwzCaJtVnNf4Wm4AMZOs\r\nfWuZfQ18xTf6/6VlBAIo5FC8QJg+Y7tMQRg0ukKFf06VfCUboDsR4JN5DUbc\r\nBdMReHgthzn2l6InSgSmbPMFPEXrw6v5QLNswT/ZCAXtKtmt8Q07HpSayii3\r\nPvItZ8tPFZjHA7TELQpHgYwU0GjoUhom3ImBKgMVHUPlys2CLn8WsiGn1Kpw\r\nWkgW6e/0ZrE4zCcAZZz4LWf9E0qoUXIHy0nDsFpmpGf8u83/7RunEbi2Vi8C\r\nPlaCwN41pM+T6dUUBetSK00ydQb7JCGYcdg2f0Y/9A5QNF24bmGWCt7jfn+I\r\nJZLUcmbw9bvWPrNfiRDv0Ow+FWScv0AclvSfdmDT+3vWB9vGzzWK9CeHqbsc\r\nXjx+go88+UsSyUK0ZKxBwHD5b986yBotdVI=\r\n=I1A3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAPS3QttKqidVzP0368gJkTWDEBaJvNyHIqPJ0FgTdMqAiB7No7wS984YVGlry7Pn7EFZcqSnuhHGy3dDsF+7jBLxw=="}]},"_npmUser":{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"},"directories":{},"maintainers":[{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"weicai.wwc@alibaba-inc.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_0.3.7_1645768992436_0.10485114275195118"},"_hasShrinkwrap":false},"1.0.0":{"name":"@bizcharts/rax-canvas","version":"1.0.0","description":"Rax跨端canvas组件","main":"lib/index.js","module":"es/index.js","miniappConfig":{"main":"lib/miniapp/index","main:wechat":"lib/wechat-miniprogram/index"},"keywords":["rax","rax-component","canvas"],"npm":">=3.0.0","scripts":{"start":"build-scripts start","build":"build-scripts build","eslint":"eslint --ext .js,.jsx,.ts,.tsx ./","eslint-fix":"npm run eslint -- --fix","stylelint":"stylelint ./**/*.css","lint":"npm run eslint && npm run stylelint","prepublishOnly":"npm run build"},"dependencies":{"@antv/f2-context":"^0.0.1","babel-runtime-jsx-plus":"^0.1.5","babel-runtime-jsx-style-transform":"^0.0.4","classnames":"^2.2.6","rax-canvas":"^2.2.1","rax-text":"^2.0.0","rax-view":"^2.0.4","universal-device":"^2.3.1","universal-env":"^4.0.0-beta"},"peerDependencies":{"jsx2mp-runtime":"^0.4.8","rax":"^1.1.0","react":"^16.18.0","react-dom":"^16.18.0"},"devDependencies":{"@alib/build-scripts":"^0.1.0","@alifd/meet-react-component-one":"^1.1.5","@iceworks/spec":"^1.0.0","@types/babel__traverse":"^7.0.4","@types/node":"^14.18.63","@types/rax":"^1.0.0","build-plugin-component":"^1.0.0","build-plugin-rax-to-react":"^1.0.5","driver-universal":"^3.1.0","eslint":"^6.8.0","postcss":"^8.4.31","rax":"^1.1.0","rax-test-renderer":"^1.0.0","react":"^17.0.1","react-dom":"^17.0.1","stylelint":"^13.7.2","typescript":"^4.5.5"},"componentConfig":{"name":"rax-example","title":"示例组件","category":""},"license":"MIT","homepage":"https://unpkg.com/@bizcharts/rax-canvas@1.0.0/build/index.html","gitHead":"744dbc3880b397c5112404c22277d0cbd67d8769","_id":"@bizcharts/rax-canvas@1.0.0","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-h320NpixvRmSkQU6C98yPKynkTmhfqrRrO6IpYuY2cFoBhegtfKoJ4hCHbX2mpRcY55VNr3fUIM2lzCRK1g8YQ==","shasum":"3506e37a606e9cd47e3e50e639e6fae0526d0fb7","tarball":"https://registry.npmjs.org/@bizcharts/rax-canvas/-/rax-canvas-1.0.0.tgz","fileCount":36,"unpackedSize":826432,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmBBQ3XnpjycE+/V7VEoxPd22bdu5odLxcqGhAAZosrwIgBSYIhvlbW7ivJYZESKsUWr4qHskZAZyRqUgpFRa4x20="}]},"_npmUser":{"name":"bugmaker","email":"898906871@qq.com"},"directories":{},"maintainers":[{"name":"hahaiwin","email":"hahaiwin@163.com"},{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"898906871@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rax-canvas_1.0.0_1701862855465_0.3491278413649246"},"_hasShrinkwrap":false}},"time":{"created":"2021-03-22T09:42:04.124Z","0.3.2-beta.0":"2021-03-22T09:42:04.405Z","modified":"2023-12-06T11:40:56.060Z","0.3.1":"2021-03-22T09:44:00.194Z","0.3.2":"2021-08-04T09:56:03.423Z","0.3.2-beta.1":"2021-09-26T07:56:22.668Z","0.3.3":"2021-09-26T08:07:14.611Z","0.3.4":"2021-10-26T07:49:09.790Z","0.3.5-beta.1":"2021-10-27T08:54:09.907Z","0.3.5":"2021-10-27T09:20:44.182Z","0.3.6-beta.1":"2021-10-28T03:27:27.516Z","0.3.6-beta.2":"2021-11-09T02:31:24.534Z","0.3.6-beta.3":"2021-11-15T12:35:45.578Z","0.3.6-beta.4":"2021-11-18T02:53:41.897Z","0.3.6-beta.5":"2021-12-08T11:26:49.151Z","0.3.6-beta.6":"2022-02-15T16:10:43.317Z","0.3.6-beta.7":"2022-02-20T14:34:48.824Z","0.3.6-beta.8":"2022-02-24T05:15:34.397Z","0.3.6-beta.9":"2022-02-24T11:57:19.586Z","0.3.6":"2022-02-24T13:30:36.389Z","0.3.7-beta.0":"2022-02-25T05:51:41.451Z","0.3.7":"2022-02-25T06:03:12.640Z","1.0.0":"2023-12-06T11:40:55.765Z"},"maintainers":[{"name":"hahaiwin","email":"hahaiwin@163.com"},{"name":"zuobin.zb","email":"zuobin.zb@alibaba-inc.com"},{"name":"weepy3641","email":"12humin12@163.com"},{"name":"leannechen","email":"811873539@qq.com"},{"name":"xiaran","email":"maqiuyan030@126.com"},{"name":"leslie2014","email":"lehouxiu@gmail.com"},{"name":"remygong","email":"etolieli.g@gmail.com"},{"name":"fengyue1","email":"heiniuhaha@gmail.com"},{"name":"ssfxz","email":"lyssfxz@126.com"},{"name":"bugmaker","email":"898906871@qq.com"}],"description":"Rax跨端canvas组件","homepage":"https://unpkg.com/@bizcharts/rax-canvas@1.0.0/build/index.html","keywords":["rax","rax-component","canvas"],"license":"MIT","readme":"## @bizcharts/rax-canvas\n\nRax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。\n\n目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。\n\n## Install\n\n```\n$ npm install @bizcharts/rax-canvas --save\n```\n\n## Usage\n\n```\nimport RaxExample from '@bizcharts/rax-canvas';\n```\n\n## API\n\n### Props\n\n| name          | type                                                                                                 | default | describe           |\n| :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- |\n| prefix        | string;                                                                                              | bx-rax  | 画布ID前缀         |\n| autoFit       | boolean;                                                                                             | true    | 自适应宽高         |\n| width         | number;                                                                                              | /       | 画布宽度           |\n| height        | number;                                                                                              | /       | 画布高度           |\n| pixelRatio    | number;                                                                                              | 2       | 清晰度             |\n| hasBackCanvas | boolean;                                                                                             | false   | 是否需要离屏canvas |\n| style         | ICanvasInfo;                                                                                         | /       | CSS样式            |\n| events        | {  onTouchStart: any;  onTouchMove: any;  onTouchEnd: any;  onTouchCancel: any;  onLongPress: any; } | /       | 事件(不推荐使用)   |\n| onTouchStart  | e=>void                                                                                              | /       | 触摸开始事件       |\n| onTouchMove   | e=>void                                                                                              | /       | 触摸移动事件       |\n| onTouchEnd    | e=>void                                                                                              | /       | 触摸结束事件       |\n| onTouchCancel | e=>void                                                                                              | /       | 触摸取消事件       |\n| onLongPress   | e=>void                                                                                              | /       | 长触事件           |\n\n\n#### ICanvasInfo\n| name        | type                      | default | describe       |\n| :---------- | :------------------------ | :------ | :------------- |\n| context     | CanvasRenderingContext2D; | /       | 绘图上下文     |\n| backContext | CanvasRenderingContext2D; | /       | 离屏绘图上下文 |\n| width       | number;                   | /       | 画布宽度       |\n| height      | number;                   | /       | 画布高度       |\n| pixelRatio  | number;                   | 2       | 清晰度         |\n\n\n### Function\n\n| name            | param      | return | describe |\n| :-------------- | :--------- | :----- | :------- |\n| onGetCanvasInfo | info=>void | /      | describe |\n\n## Example\n\n![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif)\n\n```\nimport { createElement, render } from 'rax';\nimport DriverUniversal from 'driver-universal';\nimport Canvas from '@bizcharts/rax-canvas';\n\nfunction App() {\n  let req;\n  const handleDraw = (info) => {\n    const { context: ctx, width, height } = info;\n\n    var ball = {\n      x: 100,\n      y: 100,\n      vx: 5,\n      vy: 2,\n      radius: 25,\n      color: 'blue',\n      draw: function () {\n        ctx.beginPath();\n        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);\n        ctx.closePath();\n        ctx.fillStyle = this.color;\n        ctx.fill();\n        if (ctx.draw) {\n          ctx.draw();\n        }\n      },\n    };\n\n    function draw() {\n      ctx.clearRect(0, 0, width, height);\n      ball.draw();\n      ball.x += ball.vx;\n      ball.y += ball.vy;\n\n      if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) {\n        ball.vy = -ball.vy;\n      }\n      if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) {\n        ball.vx = -ball.vx;\n      }\n      req = requestAnimationFrame(draw);\n    }\n\n    req = requestAnimationFrame(draw);\n\n    \n  };\n    useEffect(() => {\n      return () => {\n        cancelAnimationFrame(req);\n      };\n    }, []);\n  return <Canvas style={{ border: '1px solid #e3e3e3', margin: 10 }} height={300} onGetCanvasInfo={handleDraw} />;\n}\n\nrender(<App />, document.body, { driver: DriverUniversal });\n```\n","readmeFilename":"README.md"}