{"hidden":false,"children":[{"configs":{"itemId":"module"},"expanded":true,"children":[{"configs":{"layout":"border","itemId":"viewport1"},"expanded":true,"children":[{"configs":{"itemId":"toolbar1","region":"north"},"expanded":true,"children":[{"configs":{"itemId":"clearBtn","text":"清除签名","iconCls":"delete_icon"},"expanded":false,"children":[],"type":"item","events":{"click":"app.context.clearRect(0, 0, app.canvas.width, app.canvas.height);"}},{"configs":{"itemId":"exportBtn","text":"导出签名","iconCls":"export_icon"},"expanded":false,"children":[],"type":"item","events":{"click":"Wb.download('base64-file', {\n  data: app.canvas.toDataURL(\"image/png\"),\n  file: 'signature.png'\n}, true);"}},{"configs":{"itemId":"item1","text":"->"},"expanded":false,"children":[],"type":"item"},{"configs":{"itemId":"html5Text","xtype":"tbtext","text":"html5示例"},"expanded":false,"children":[],"type":"item"}],"type":"toolbar"},{"configs":{"itemId":"comp1","html":"<canvas itemId='canvas'><\/canvas>","region":"center"},"expanded":false,"children":[],"type":"comp"}],"type":"viewport","events":{"afterrender":"function onMouseMove(evt) {\n  evt.preventDefault();\n  if (flag) {\n    var p = pos(evt);\n    ctx.lineTo(p.x, p.y);\n    ctx.lineWidth = 2;\n    ctx.shadowColor = \"#333\";\n    ctx.shadowBlur = 1;\n    ctx.stroke();\n  }\n}\n\nfunction onMouseDown(evt) {\n  evt.preventDefault();\n  ctx.beginPath();\n  var p = pos(evt);\n  ctx.moveTo(p.x, p.y);\n  flag = true;\n}\n\n\nfunction onMouseUp(evt) {\n  evt.preventDefault();\n  flag = false;\n}\n\nfunction pos() {\n  var xy = Ext.EventObject.getXY();\n  return {\n    x: xy[0] - app.comp1.el.getLeft(),\n    y: xy[1] - app.comp1.el.getTop()\n  };\n}\nvar canvas = app.canvas = app.comp1.el.down('[itemId=canvas]', true),\n  ctx = app.context = canvas.getContext('2d'),\n  flag = false;\ncanvas.addEventListener('mousemove', onMouseMove, false);\ncanvas.addEventListener('mousedown', onMouseDown, false);\ncanvas.addEventListener('mouseup', onMouseUp, false);\ncanvas.addEventListener('touchstart', onMouseDown, false);\ncanvas.addEventListener('touchmove', onMouseMove, false);\ncanvas.addEventListener('touchend', onMouseUp, false);\nctx.strokeStyle = \"#333\";","resize":"app.canvas.width = app.comp1.getWidth();\napp.canvas.height = app.comp1.getHeight();"}}],"type":"module"}],"roles":{"demo":1},"title":"手写签名","iconCls":"","inframe":false,"pageLink":""}