index.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title></title>
  8. <style type="text/css">
  9. html,
  10. body,
  11. canvas {
  12. padding: 0;
  13. margin: 0;
  14. width: 100%;
  15. height: 100%;
  16. overflow-y: hidden;
  17. background-color: transparent;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <canvas id="lime-painter"></canvas>
  23. <script type="text/javascript" src="./uni.webview.1.5.3.js"></script>
  24. <script type="text/javascript" src="./painter.js"></script>
  25. <script>
  26. var cache = [];
  27. var painter = null;
  28. var canvas = null;
  29. var context = null;
  30. var timer = null;
  31. var pixelRatio = 1;
  32. console.log = function (...args) {
  33. postMessage(args);
  34. };
  35. // function stringify(key, value) {
  36. // if (typeof value === 'object' && value !== null) {
  37. // if (cache.indexOf(value) !== -1) {
  38. // return;
  39. // }
  40. // cache.push(value);
  41. // }
  42. // return value;
  43. // };
  44. function emit(event, data) {
  45. postMessage({
  46. event,
  47. data: (typeof data !== 'object' && data !== null ? data : JSON.stringify(data))
  48. });
  49. cache = [];
  50. };
  51. function postMessage(data) {
  52. uni.postMessage({
  53. data
  54. });
  55. };
  56. function init(dpr) {
  57. canvas = document.querySelector('#lime-painter');
  58. context = canvas.getContext('2d');
  59. pixelRatio = dpr || window.devicePixelRatio;
  60. painter = new Painter({
  61. id: 'lime-painter',
  62. context,
  63. canvas,
  64. pixelRatio,
  65. width: canvas.offsetWidth,
  66. height: canvas.offsetHeight,
  67. listen: {
  68. onProgress(v) {
  69. emit('progressChange', v);
  70. },
  71. onEffectFail(err) {
  72. //console.error(err)
  73. emit('fail', err);
  74. }
  75. }
  76. });
  77. emit('inited', true);
  78. };
  79. function save(args) {
  80. delete args.success;
  81. delete args.fail;
  82. clearTimeout(timer);
  83. timer = setTimeout(() => {
  84. const path = painter.save(args);
  85. if (typeof path == 'string') {
  86. const index = Math.ceil(path.length / 8);
  87. for (var i = 0; i < 8; i++) {
  88. if (i == 7) {
  89. emit('success', path.substr(i * index, index));
  90. } else {
  91. emit('file', path.substr(i * index, index));
  92. }
  93. };
  94. } else {
  95. // console.log('canvas no data')
  96. emit('fail', 'canvas no data');
  97. };
  98. }, 30);
  99. };
  100. async function source(args) {
  101. let size = await painter.source(args);
  102. emit('layoutChange', size);
  103. if(!canvas.height) {
  104. console.log('canvas no size')
  105. emit('fail', 'canvas no size');
  106. }
  107. painter.render().catch(err => {
  108. // console.error(err)
  109. emit('fail', err);
  110. });
  111. };
  112. </script>
  113. </body>
  114. </html>