{"id":33741,"date":"2024-11-25T14:16:41","date_gmt":"2024-11-25T06:16:41","guid":{"rendered":"https:\/\/fwq.ai\/blog\/33741\/"},"modified":"2024-11-25T14:16:41","modified_gmt":"2024-11-25T06:16:41","slug":"%e4%bd%bf%e7%94%a8%e5%b0%8f%e7%a8%8b%e5%ba%8fcanvas%e5%86%99%e4%b8%80%e4%b8%aa%e7%ae%80%e5%8d%95%e7%9a%84%e5%9b%be%e7%89%87%e5%ba%94%e7%94%a8","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/33741\/","title":{"rendered":"\u4f7f\u7528\u5c0f\u7a0b\u5e8fcanvas\u5199\u4e00\u4e2a\u7b80\u5355\u7684\u56fe\u7247\u5e94\u7528"},"content":{"rendered":"

<\/h3>\n

\u680f\u76ee\u4ecb\u7ecd\u4f7f\u7528canvas\u5199\u4e00\u4e2a\u56fe\u7247<\/strong><\/p>\n

\"\u4f7f\u7528\u5c0f\u7a0b\u5e8fcanvas\u5199\u4e00\u4e2a\u7b80\u5355\u7684\u56fe\u7247\u5e94\u7528\u63d2\u56fe\"<\/p>\n

\u63a8\u8350\uff08\u514d\u8d39\uff09\uff1a<\/strong><\/p>\n

\u5e94\u7528\u5c55\u793a<\/strong><\/p>\n

\u622a\u56fe<\/h4>\n

\"\u4f7f\u7528\u5c0f\u7a0b\u5e8fcanvas\u5199\u4e00\u4e2a\u7b80\u5355\u7684\u56fe\u7247\u5e94\u7528\u63d2\u56fe1\"<\/p>\n

\u9700\u6c42<\/strong><\/p>\n

\u65e2\u7136\u662f\u5c0f\u5e94\u7528\uff0c\u90a3\u5c31\u5e0c\u671b\u6700\u7ec8\u6210\u54c1\u662f\u6709 \u9002\u7528\u7684\u573a\u666f<\/strong> \u4e14\u662f \u6709\u4ef7\u503c<\/strong> \u7684<\/p>\n

\u9700\u6c42\u6765\u6e90<\/p>\n

\u8fd9\u4e2a\u5e94\u7528\u9700\u6c42\u7684\u7075\u611f <\/p>\n

\u5728\u4ee5\u524d\u5de5\u4f5c\u751f\u6d3b\u4e2d\uff0c\u7ecf\u5e38\u4f1a\u65e0\u610f\u4e2d\u83b7\u5f97\u540c\u4e8b\u7684 \u7f8e\u7167<\/strong> <\/p>\n

\u8fd9\u65f6\u6211\u4eec\u60f3\u8981\u628a\u8fd9\u5f20\u7167\u7247\u505a\u6210\u8868\u60c5\u5305<\/p>\n

\u4e00\u822c\u7ed9\u56fe\u7247\u6dfb\u52a0\u51e0\u4e2a\u8bf4\u660e\u6587\u5b57<\/p>\n

\u4e00\u4e2a\u6709\u610f\u601d\u7684\u6c9f\u901a\u5de5\u5177\uff08\u8868\u60c5\u5305\uff09\u5c31\u5b8c\u6210\u4e86<\/p>\n

\u9700\u6c42\u5206\u6790<\/h3>\n

\u57fa\u4e8e\u4ee5\u4e0a\u9700\u6c42\u7684\u62c6\u89e3<\/p>\n

\u53ef\u4ee5\u5c06\u8981\u5e94\u7528\u529f\u80fd\u5b9e\u73b0\u6574\u7406\u4e00\u4e0b<\/p>\n

    \n
  • \u7528\u6237\u9700\u8981\u4e0a\u4f20\u4e00\u5f20\u56fe\u7247<\/li>\n
  • \u53ef\u4ee5\u6dfb\u52a0\u6587\u5b57<\/li>\n
  • \u6587\u5b57\u53ef\u4ee5\u4f5c \u6837\u5f0f\u8c03\u6574<\/strong> \u548c \u65cb\u8f6c\u7f29\u653e<\/strong> <\/li>\n
  • \u53e6\u5916\u6211\u4eec\u5e0c\u671b\u8fd8\u53ef\u4ee5\u63d2\u5165\u4e00\u4e9b\u8d34\u56fe<\/li>\n
  • \u8d34\u56fe\u53ef\u4ee5\u505a \u65cb\u8f6c\u7f29\u653e<\/strong> <\/li>\n
  • \u7528\u6237\u5bfc\u51fa\u56fe\u7247\u5230\u76f8\u518c<\/li>\n<\/ul>\n

    \u5b9e\u73b0<\/strong><\/p>\n

    github\u4ed3\u5e93<\/strong> https:\/\/github.com\/luosijie\/f…<\/p>\n

    \n \u5982\u679c\u559c\u6b22\u6211\u7684\u9879\u76ee\uff0c\u6b22\u8fce\u7ed9\u4e2a\u661f\u661f\u9f13\u52b1\u4e00\u4e0b\n<\/p><\/blockquote>\n

    \u8fd9\u4e2a\u5e94\u7528\u662f\u7528\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u7684<\/p>\n

      \n
    • \u4f7f\u7528\u6846\u67b6\uff1ampx<\/li>\n
    • \u4f7f\u7528\u6280\u672f\uff1a\u5c0f\u7a0b\u5e8fcanvas<\/li>\n<\/ul>\n

      \u72b6\u6001\u7ba1\u7406<\/strong><\/p>\n

      import { createStore } from '@mpxjs\/core'\n\nconst store = createStore({\n  state: {\n    cavas: null,         \/\/ cnavas\u5b9e\u4f8b\n    ctx: null,           \/\/ canvas\u4e0a\u4e0b\u6587\u5b9e\u4f8b\n    elements: [],        \/\/ canvas\u5143\u7d20\n    activeIndex: null,   \/\/ \u5f53\u524d\u7f16\u8f91\u4e2d\u7684\u5143\u7d20\u7d22\u5f15\n    mode: 'background',  \/\/ \u5f53\u524d\u7f16\u8f91\u6a21\u5f0f\uff1abackground, text, sticker\n    fontStyle: {         \/\/ \u6587\u5b57\u9ed8\u8ba4\u6837\u5f0f\n      opacity: 1,\n      fillStyle: '#000000',\n      strokeStyle: '#000000'\n    }\n  },\n  mutations: {\n    setCanvas (state, data) {\n      state.canvas = data\n    },\n    setCtx (state, data) {\n      state.ctx = data\n    },\n    setElements (state, data) {\n      state.elements = data\n    },\n    setMode (state, data) {\n      state.mode = data\n    },\n    setActiveIndex (state, data) {\n      state.activeIndex = data\n    },\n    setFontStyle (state, { key, data }) {\n      state.fontStyle[key] = data\n    },\n    \/\/ \u6dfb\u52a0\u6587\u5b57\n    addText (state) {\n      const size = 50\n      const string = '\u8bf7\u8f93\u5165\u6587\u5b57'\n      const text = {\n        type: 'text',\n        data: string,\n        scale: 1,\n        size,\n        left: 100,\n        top: 100,\n        rotate: 0,\n        opacity: state.fontStyle.opacity,\n        fillStyle: state.fontStyle.fillStyle,\n        strokeStyle: state.fontStyle.strokeStyle\n      }\n      state.elements.push(text)\n      state.activeIndex = state.elements.length - 1\n    },\n    \/\/ \u6dfb\u52a0\u8d34\u56fe\n    addSticker (state, data) {\n      state.elements.push(data)\n      state.activeIndex = state.elements.length - 1\n    },\n    \/\/ \u5220\u9664\u5f53\u524d\u9009\u4e2d\n    deleteActiveELement (state) {\n      state.elements.splice(state.activeIndex, 1)\n      state.activeIndex = null\n    },\n    \/\/ \u6e05\u7a7a\u753b\u5e03\n    clear (state) {\n      state.elements = []\n      state.activeIndex = null\n    }\n  }\n})\n\nexport default store<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u753b\u5e03\u521d\u59cb\u5316<\/strong><\/p>\n
      \/\/ \u521d\u59cb\u5316\u753b\u5e03\nasync initCanvas() {\n  const query = this.createSelectorQuery()\n  query\n    .select('#canvas')\n    .fields({ node: true, size: true })\n    .exec(async res => {\n      const canvas = res[0].node\n      const ctx = canvas.getContext('2d')\n      store.commit('setCanvas', canvas)\n      store.commit('setCtx', ctx)\n\n      await this.loadImage('\/images\/icon-rotate.png').then(res => {\n        this.image.rotate = res\n      })\n\n      canvas.width = res[0].width * this.dpr\n      canvas.height = res[0].height * this.dpr\n      ctx.scale(this.dpr, this.dpr)\n      this.drawGrid()\n    })\n}<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u7ed8\u5236\u56fe\u7247<\/strong><\/p>\n
      \/**\n * \u7ed8\u5236\u56fe\u7247\n * @param { Object } ele canvas\u5143\u7d20\n *\/\ndrawImage(ele) {\n  this.ctx.save()\n  const width = ele.width\n  const height = ele.height\n  const centerX = ele.left + ele.width \/ 2\n  const centerY = ele.top + ele.height \/ 2\n  this.ctx.translate(centerX, centerY)\n  this.ctx.rotate(ele.rotate)\n  this.ctx.drawImage(ele.data, ele.left - centerX, ele.top - centerY, width, height)\n  this.ctx.restore()\n}<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u7ed8\u5236\u6587\u5b57<\/strong><\/p>\n
      \/**\n * \u7ed8\u5236\u6587\u5b57\n * @param { Object } ele canvas\u5143\u7d20\n *\/\ndrawText(ele) {\n  this.ctx.save()\n  const width = ele.size * ele.data.length\n  const height = ele.size\n  const centerX = ele.left + width \/ 2\n  const centerY = ele.top + height \/ 2\n  this.ctx.translate(centerX, centerY)\n  this.ctx.rotate(ele.rotate)\n  this.ctx.font = `${ele.size}px bold sans-serif`\n  this.ctx.globalAlpha = ele.opacity\n  this.ctx.fillStyle = ele.fillStyle\n  this.ctx.strokeStyle = ele.strokeStyle\n  \/\/ this.ctx.lineWidth = 2\n  this.ctx.textBaseline = 'top'\n  console.log('draw-text', ele)\n  this.ctx.fillText(ele.data, ele.left - centerX, ele.top - centerY)\n  this.ctx.strokeText(ele.data, ele.left - centerX, ele.top - centerY)\n  this.ctx.restore()\n}<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u7ed8\u5236\u63a7\u5236\u5143\u4ef6<\/strong><\/p>\n
      initController(ele) {\n  const cs = this.convert2ControllerSize(ele)\n  this.ctx.save()\n  this.ctx.strokeStyle = '#eee'\n  this.ctx.translate(cs.centerX, cs.centerY)\n  this.ctx.rotate(cs.rotate)\n  \/\/ \u7ed8\u5236\u865a\u7ebf\u8fb9\u6846\n  this.ctx.setLineDash([10, 5], 5)\n  this.ctx.strokeRect(cs.left - cs.centerX, cs.top - cs.centerY, cs.width, cs.height)\n  \/\/ \u7ed8\u5236\u63a7\u5236\u70b9-\u65cb\u8f6c\n  this.ctx.drawImage(this.image.rotate, cs.left + cs.width - 10 - cs.centerX, cs.top + cs.height - 10 - cs.centerY, 20, 20)\n  this.ctx.restore()\n}<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u753b\u5e03\u6e32\u67d3\u51fd\u6570<\/strong><\/p>\n
      \/\/ \u753b\u5e03\u6e32\u67d3\u51fd\u6570\nrenderCanvas() {\n  this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)\n  this.drawGrid()\n  console.log('draw-background', this.background)\n  if (this.background) this.drawImage(this.background)\n  for (let i = 0; i < this.elements.length; i++) {\n    const ele = this.elements[i]\n    \/\/ \u6e32\u67d3\u80cc\u666f\n    if (ele.type === 'background') {\n      this.drawImage(ele)\n    }\n    if (ele.type === 'sticker') {\n      this.drawImage(ele)\n    }\n    \/\/ \u6e32\u67d3\u6587\u5b57\n    if (ele.type === 'text') {\n      this.drawText(ele)\n    }\n    \/\/ \u9009\u4e2d\u5143\u7d20\u6dfb\u52a0\u63a7\u5236\u5143\u4ef6\n    if (this.activeIndex === i) {\n      this.initController(ele)\n    }\n  }\n}<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u4e8b\u4ef6\u76d1\u542c<\/strong><\/p>\n
      \u79fb\u52a8<\/strong><\/p>\n
      \/\/ \u79fb\u52a8\u4e8b\u4ef6\u7ed1\u5b9a\u51fd\u6570\nhandleMove(e) {\n  console.log('mouse-move', e)\n  if (e.touches.length > 1) return\n  const x = e.touches[0].x\n  const y = e.touches[0].y\n  const dx = this.startTouches[0].x - x\n  const dy = this.startTouches[0].y - y\n  const elements = this.elements.slice()\n  elements[this.activeIndex || 0].left = this.startSelected.left - dx\n  elements[this.activeIndex || 0].top = this.startSelected.top - dy\n  store.commit('setElements', elements)\n}<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u65cb\u8f6c<\/h4>\n
      \/\/ \u65cb\u8f6c\u7ed1\u5b9a\u51fd\u6570\nhandleRotate(e) {\n  console.log('handleRotate')\n  const start = this.startTouches[0]\n  const end = e.touches[0]\n  const center = {\n    x: this.startSelected.centerX,\n    y: this.startSelected.centerY\n  }\n  const startLength = Math.sqrt((center.x - start.x) ** 2 + (center.y - start.y) ** 2)\n  const endLength = Math.sqrt((center.x - end.x) ** 2 + (center.y - end.y) ** 2)\n  const radian = this.convert2Radian(start, end, center)\n  const scale = endLength \/ startLength\n  const elements = this.elements.slice()\n  const selected = elements[this.activeIndex]\n  \/\/ \u65cb\u8f6c\n  selected.rotate = this.startSelected.rotate - radian\n  \/\/ \u7f29\u653e\n  if (selected.type === 'text') {\n    selected.left = this.startSelected.centerX - this.startSelected.size * this.startSelected.data.length * scale \/ 2\n    selected.top = this.startSelected.centerY - this.startSelected.size * scale \/ 2\n    selected.size = this.startSelected.size * scale\n  }\n  if (selected.type === 'sticker') {\n    selected.left = this.startSelected.centerX - this.startSelected.width * scale \/ 2\n    selected.top = this.startSelected.centerY - this.startSelected.height * scale \/ 2\n    selected.width = this.startSelected.width * scale\n    selected.height = this.startSelected.height * scale\n  }\n  store.commit('setElements', elements)\n}<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u7f29\u653e<\/h4>\n
      \/\/ \u7f29\u653e\u4e8b\u4ef6\u7ed1\u5b9a\u51fd\u6570\nhandleScale(e) {\n  if (e.touches.length !== 2 || this.mode !== 'background') return\n  const startLength = Math.sqrt(\n    (this.startTouches[0].x - this.startTouches[1].x) ** 2 +\n      (this.startTouches[0].y - this.startTouches[1].y) ** 2\n  )\n  const endLength = Math.sqrt(\n    (e.touches[0].x - e.touches[1].x) ** 2 + (e.touches[0].y - e.touches[1].y) ** 2\n  )\n  const scale = endLength \/ startLength\n  const elements = this.elements.slice()\n  const selected = elements[this.activeIndex || 0]\n  selected.left = this.startSelected.centerX - this.startSelected.width * scale \/ 2\n  selected.top = this.startSelected.centerY - this.startSelected.height * scale \/ 2\n  selected.width = this.startSelected.width * scale\n  selected.height = this.startSelected.height * scale\n  \/\/ elements[this.activeIndex || 0].scale = this.startSelected.scale * scale\n  store.commit('setElements', elements)\n}<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u5bfc\u51fa\u56fe\u7247<\/h4>\n
      export() {\n  if (!store.state.elements.length) {\n    wx.showToast({\n      title: '\u52a0\u70b9\u4e1c\u897f\u518d\u5bfc\u51fa\u5427',\n      icon: 'none'\n    })\n    return\n  }\n  wx.showModal({\n    title: '\u63d0\u793a',\n    content: '\u56fe\u7247\u5c06\u4fdd\u5b58\u5230\u624b\u673a\u76f8\u518c',\n    success(res) {\n      if (res.confirm) {\n        console.log('export-canvas', store.state.ctx)\n        const canvas = store.state.canvas\n        wx.canvasToTempFilePath({\n          x: 0,\n          y: 0,\n          width: canvas.width,\n          height: canvas.height,\n          canvas,\n          complete(res) {\n            if (res.errMsg === 'canvasToTempFilePath:ok') {\n              wx.saveImageToPhotosAlbum({\n                filePath: res.tempFilePath,\n                success(res) {\n                  wx.showToast({\n                    title: '\u56fe\u7247\u4fdd\u5b58\u6210\u529f',\n                    icon: 'none'\n                  })\n                }\n              })\n            }\n          }\n        })\n      }\n    }\n  })\n}<\/pre>\n
       \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
      \u4ee5\u4e0a\u5c31\u662f\u4f7f\u7528\u5c0f\u7a0b\u5e8fcanvas\u5199\u4e00\u4e2a\u7b80\u5355\u7684\u56fe\u7247\u5e94\u7528\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
      \u680f\u76ee\u4ecb\u7ecd\u4f7f\u7528canvas\u5199\u4e00\u4e2a\u56fe\u7247 \u63a8\u8350\uff08\u514d\u8d39\uff09\uff1a \u5e94\u7528\u5c55\u793a \u622a\u56fe \u9700\u6c42 \u65e2\u7136\u662f\u5c0f\u5e94\u7528\uff0c\u90a3\u5c31\u5e0c\u671b\u6700\u7ec8\u6210\u54c1\u662f\u6709 \u9002\u7528\u7684\u573a\u666f \u4e14\u662f \u6709\u4ef7\u503c \u7684 \u9700\u6c42\u6765\u6e90 \u8fd9\u4e2a\u5e94\u7528\u9700\u6c42\u7684\u7075\u611f \u5728\u4ee5\u524d\u5de5\u4f5c\u751f\u6d3b\u4e2d\uff0c\u7ecf\u5e38\u4f1a\u65e0\u610f\u4e2d\u83b7\u5f97\u540c\u4e8b\u7684 \u7f8e\u7167 \u8fd9\u65f6\u6211\u4eec\u60f3\u8981\u628a\u8fd9\u5f20\u7167\u7247\u505a\u6210\u8868\u60c5\u5305 \u4e00\u822c\u7ed9\u56fe\u7247\u6dfb\u52a0\u51e0\u4e2a\u8bf4\u660e\u6587\u5b57 \u4e00\u4e2a\u6709\u610f\u601d\u7684\u6c9f\u901a\u5de5\u5177\uff08\u8868\u60c5\u5305\uff09\u5c31\u5b8c\u6210\u4e86 \u9700\u6c42\u5206\u6790 \u57fa\u4e8e\u4ee5\u4e0a\u9700\u6c42\u7684\u62c6\u89e3 \u53ef\u4ee5\u5c06\u8981\u5e94\u7528\u529f\u80fd\u5b9e\u73b0\u6574\u7406\u4e00\u4e0b \u7528\u6237\u9700\u8981\u4e0a\u4f20\u4e00\u5f20\u56fe\u7247 \u53ef\u4ee5\u6dfb\u52a0\u6587\u5b57 \u6587\u5b57\u53ef\u4ee5\u4f5c \u6837\u5f0f\u8c03\u6574 \u548c \u65cb\u8f6c\u7f29\u653e \u53e6\u5916\u6211\u4eec\u5e0c\u671b\u8fd8\u53ef\u4ee5\u63d2\u5165\u4e00\u4e9b\u8d34\u56fe \u8d34\u56fe\u53ef\u4ee5\u505a \u65cb\u8f6c\u7f29\u653e \u7528\u6237\u5bfc\u51fa\u56fe\u7247\u5230\u76f8\u518c \u5b9e\u73b0 github\u4ed3\u5e93 https:\/\/github.com\/luosijie\/f… \u5982\u679c\u559c\u6b22\u6211\u7684\u9879\u76ee\uff0c\u6b22\u8fce\u7ed9\u4e2a\u661f\u661f\u9f13\u52b1\u4e00\u4e0b \u8fd9\u4e2a\u5e94\u7528\u662f\u7528\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u7684 \u4f7f\u7528\u6846\u67b6\uff1ampx \u4f7f\u7528\u6280\u672f\uff1a\u5c0f\u7a0b\u5e8fcanvas \u72b6\u6001\u7ba1\u7406 import { createStore } from ‘@mpxjs\/core’ const store = createStore({ state: { cavas: null, \/\/ cnavas\u5b9e\u4f8b ctx: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-33741","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=33741"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33741\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=33741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=33741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=33741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}