{"id":77703,"date":"2024-09-23T07:02:55","date_gmt":"2024-09-23T03:32:55","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/"},"modified":"2024-09-23T07:02:55","modified_gmt":"2024-09-23T03:32:55","slug":"develop-mobile-h5-image-editor-details-using-fabricjs-4dki","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/","title":{"rendered":"\u062c\u0632\u0626\u06cc\u0627\u062a \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 H5 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 fabric.js \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u06cc\u062f"},"content":{"rendered":"<p>Summarize this content to 400 words in Persian Lang<br \/>\n            \u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u0647! \u0645\u0646 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u062f\u0631 https:\/\/github.com\/ikuaitu\/vue-fabric-editor \u0647\u0633\u062a\u0645. \u0627\u06cc\u0646 \u06cc\u06a9 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0646\u0633\u062e\u0647 \u0631\u0627\u06cc\u0627\u0646\u0647 \u0634\u062e\u0635\u06cc \u0627\u0633\u062a.<\/p>\n<p>\u0627\u062e\u06cc\u0631\u0627\u060c \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u06cc\u0646 \u0633\u0648\u0627\u0644 \u0631\u0627 \u0645\u0637\u0631\u062d \u06a9\u0631\u062f\u0647 \u0627\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0646\u0633\u062e\u0647 H5 \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u067e\u0627\u06cc\u0627\u0646\u0647 \u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062f. \u0627\u062e\u06cc\u0631\u0627\u064b\u060c \u0628\u0647 \u0645\u062d\u0636 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0646\u0633\u062e\u0647 H5 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631\u060c \u0627\u06cc\u062f\u0647\u200c\u0647\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0648 \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u062f\u0631 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a\u200c\u0647\u0627\u06cc\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0631\u062f\u0645 \u0648 \u0628\u0631\u0627\u06cc \u0645\u0631\u062c\u0639 \u0634\u0645\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0645.<\/p>\n<p>\u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0645\u0627\u0646\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0642\u0627\u0644\u0628 \u0647\u0627\u060c \u0627\u0641\u0632\u0648\u062f\u0646 \u0639\u0646\u0627\u0635\u0631\u060c \u0641\u0648\u0646\u062a \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0648 \u063a\u06cc\u0631\u0647 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f\u060c \u0627\u0645\u0627 \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 \u062a\u0639\u0627\u0645\u0644 \u062f\u0631 \u0633\u0645\u062a \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647\u060c \u062a\u0641\u0627\u0648\u062a \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0632\u06cc\u0627\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a. . \u0627\u06cc\u0646 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0639\u0645\u062f\u062a\u0627 \u0627\u06cc\u062f\u0647 \u0648 \u062c\u0632\u0626\u06cc\u0627\u062a \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0645\u06cc\u200c\u06af\u0630\u0627\u0631\u062f.<\/p>\n<p>\u062a\u063a\u06cc\u06cc\u0631 \u0642\u0627\u0644\u0628 \u0647\u0627<br \/>\n\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631<br \/>\n\u0639\u0646\u0627\u0635\u0631 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n\u062a\u0646\u0638\u06cc\u0645 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647<br \/>\n\u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0648\u0645<br \/>\n\u0645\u0646\u0648\u06cc \u0633\u0631\u06cc\u0639<br \/>\n\u0646\u0648\u0627\u0631 \u0627\u0628\u0632\u0627\u0631 \u062e\u0648\u0627\u0635.<br \/>\n\u0641\u0648\u0646\u062a \u0647\u0627\u06cc \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0648\u06cc\u0698\u0647<br \/>\n\u062a\u063a\u06cc\u06cc\u0631 \u0641\u0648\u0646\u062a<br \/>\n\u0645\u062a\u0646 \u0648\u0631\u0648\u062f\u06cc<br \/>\n\u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0645\u062a\u0646<br \/>\n\u0645\u0631\u0632.<br \/>\n\u0633\u0627\u06cc\u0647.<br \/>\n\u062f\u0627\u0646\u0644\u0648\u062f \u062a\u0635\u0627\u0648\u06cc\u0631.<\/p>\n<p>\u062a\u0648\u062c\u0647: \u0628\u0631\u062e\u06cc \u0627\u0632 \u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u06a9\u062f \u06a9\u062f \u0628\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0634\u062f\u0647\u200c\u0627\u0646\u062f \u0648 \u0628\u0648\u0645\u06cc \u067e\u0627\u0631\u0686\u0647\u200c\u0627\u06cc \u0646\u06cc\u0633\u062a\u0646\u062f.<\/p>\n<p>  1. \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0644\u06af\u0648<\/p>\n<p>\u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u0628\u0631 \u0627\u0633\u0627\u0633 fabric.js \u062a\u0648\u0633\u0639\u0647 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u062a\u0645\u0627\u0645 \u0642\u0627\u0644\u0628 \u0647\u0627 \u0628\u0627 \u0641\u0631\u0645\u062a json \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f. \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0644\u06af\u0648\u0647\u0627\u060c \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0631\u0627\u0628\u0637 \u062c\u0632\u0626\u06cc\u0627\u062a \u0631\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0627 \u0641\u0631\u0645\u062a json \u0628\u0647 \u0628\u0648\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u0642\u0628\u0644 \u0627\u0632 \u0631\u0646\u062f\u0631 \u0628\u0647 \u0646\u0627\u0645 \u0641\u0648\u0646\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0642\u0627\u0644\u0628 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0641\u0627\u06cc\u0644 \u0641\u0648\u0646\u062a \u0631\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u063a\u06cc\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0633\u0628\u06a9 \u0641\u0648\u0646\u062a \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0631\u0646\u062f\u0631 \u0646\u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>const loadInfo = async (res: any) =&gt; {<br \/>\n  const info = res.data<br \/>\n  templName.value = info.name;<br \/>\n  await canvasEditor.getFontList(JSON.stringify(info.json));<br \/>\n  canvasEditor.loadJSON(JSON.stringify(info.json), () =&gt; LoadingPlugin(false));<br \/>\n};<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  2. \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062a\u0635\u0648\u06cc\u0631<\/p>\n<p>\u0631\u0627\u0647\u200c\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631 \u062f\u0631 fabric.js \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0633\u0627\u062f\u0647\u200c\u062a\u0631\u06cc\u0646 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 fabric.Image.fromURL\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0627\u063a\u0644\u0628 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0632\u0631\u06af\u062a\u0631 \u0627\u0632 \u0628\u0648\u0645 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0627\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0646\u062f\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0639\u0631\u0636 \u0628\u0648\u0645 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627\u062d\u062a \u062a\u0631 \u0627\u0633\u062a.<\/p>\n<p>const toEditor = async (e: MouseEvent) =&gt; {<br \/>\n  visible.value = false<br \/>\n  LoadingPlugin(true)<br \/>\n  const item = await canvasEditor.createImgByElement(e.target as HTMLImageElement)<br \/>\n  await canvasEditor.addBaseType(item, { scale: true })<br \/>\n  LoadingPlugin(false)<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  3. \u0639\u0646\u0635\u0631 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n<p>Fabric.js \u0627\u0632 \u0635\u0627\u062f\u0631\u0627\u062a\/\u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062f\u0631 \u0642\u0627\u0644\u0628 JSON \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06af\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0635\u0627\u062f\u0631 \u0634\u062f\u0647 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0646\u0648\u0639 \u0639\u0646\u0635\u0631 \u0647\u0646\u06af\u0627\u0645 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u0645. \u0628\u0627\u06cc\u062f \u0646\u0648\u0639 \u0639\u0646\u0635\u0631 \u0631\u0627 \u062f\u0631 JSON \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0627\u0645 \u0645\u062a\u062f \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627\u06cc\u062f \u0642\u0628\u0644 \u0627\u0632 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0641\u0648\u0646\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0648 \u0628\u0639\u062f \u0627\u0632 \u0631\u06cc\u062e\u062a\u0646 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0646\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.<\/p>\n<p>const capitalizeFirstLetter = (str: string) =&gt; {<br \/>\n  return str.charAt(0).toUpperCase() + str.slice(1);<br \/>\n}<\/p>\n<p>const toEditor = async (item: ItemProps) =&gt; {<br \/>\n  visible.value = false<br \/>\n  LoadingPlugin(true)<br \/>\n  await canvasEditor.downFontByJSON(JSON.stringify(item.json));<br \/>\n  const el = JSON.parse(JSON.stringify(item.json));<br \/>\n  const elType = capitalizeFirstLetter(el.type);<br \/>\n  new fabric[elType].fromObject(el, (fabricEl: fabric.Object) =&gt; {<br \/>\n    canvasEditor.dragAddItem(fabricEl);<br \/>\n    LoadingPlugin(false)<br \/>\n  });<br \/>\n}<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  4. \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/p>\n<p>\u062a\u0646\u0638\u06cc\u0645 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0646\u0633\u0628\u062a\u0627 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u0646\u06af \u0631\u0627 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 API \u067e\u0627\u0631\u0686\u0647 \u0647\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f. \u0644\u0627\u0632\u0645 \u0628\u0647 \u0630\u06a9\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0627\u06a9\u062b\u0631 \u0627\u062c\u0632\u0627\u06cc \u0631\u0646\u06af\u06cc \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u06cc\u0627\u0646\u0647 \u0634\u062e\u0635\u06cc \u0628\u0627 \u0635\u062d\u0646\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0627\u0646\u062a\u0647\u0627\u06cc H5 \u0633\u0627\u0632\u06af\u0627\u0631 \u0646\u06cc\u0633\u062a\u0646\u062f \u0648 \u0627\u0632 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0644\u0645\u0633\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc \u06a9\u0646\u0646\u062f. \u0645\u0627 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a &#8220;@jaames\/iro&#8221; \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645 \u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u062e\u0648\u0628\u06cc \u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u062f\u0627\u0631\u062f \u0648 \u06a9\u0627\u0645\u0644\u0627\u064b \u0628\u0627 \u0635\u062d\u0646\u0647 \u0645\u0627 \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a. API \u0622\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0627\u0633\u062a. \u0645\u0627 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u062c\u0632\u0621 \u0631\u0646\u06af \u0639\u0645\u0648\u0645\u06cc \u06a9\u067e\u0633\u0648\u0644\u0647 \u06a9\u0631\u062f\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0686\u0646\u062f\u06cc\u0646 \u0645\u06a9\u0627\u0646 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0631\u062f\u06cc\u0645.<\/p>\n<p>(&#8221;);<br \/>\nlet colorPicker: any = null;<\/p>\n<p>onMounted(() => {<br \/>\n  \/\/ &#21019;&#24314;iro.js&#39068;&#33394;&#36873;&#25321;&#22120;<br \/>\n  colorPicker = iro.ColorPicker(pickerContainer.value, {<br \/>\n    width: props.width,<br \/>\n    color: props.modelValue,<br \/>\n    borderWidth: 1,<br \/>\n    borderColor: &#8220;#fff&#8221;,<br \/>\n    layoutDirection: &#8216;horizontal&#8217;,<br \/>\n    layout: [<br \/>\n      {<br \/>\n        component: iro.ui.Slider,<br \/>\n        options: {<br \/>\n          id: &#8216;hue-slider&#8217;,<br \/>\n          sliderType: &#8216;hue&#8217;<br \/>\n        }<br \/>\n      },<br \/>\n      {<br \/>\n        component: iro.ui.Box,<br \/>\n      },<br \/>\n      {<br \/>\n        component: iro.ui.Slider,<br \/>\n        options: {<br \/>\n          sliderType: &#8216;alpha&#8217;<br \/>\n        }<br \/>\n      }<br \/>\n    ]\n  });<\/p>\n<p>  \/\/ &#30417;&#21548;&#39068;&#33394;&#21464;&#21270;&#20107;&#20214;&#24182;&#21457;&#23556;&#33258;&#23450;&#20041;&#20107;&#20214;<br \/>\n  colorPicker.on(&#8216;color:change&#8217;, (color: any) => {<br \/>\n    const rgbaString = color.rgbaString;<br \/>\n    emit(&#8216;update:modelValue&#8217;, rgbaString);<br \/>\n    emit(&#8216;change&#8217;, rgbaString);<br \/>\n  });<br \/>\n});<\/p>\n<p>]]><\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  5. \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0648\u0645 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<\/p>\n<p>const resizeEditor = async () =&gt; {<br \/>\n    await nextTick()<br \/>\n    const editorWorkspase = document.querySelector(&#8216;#workspace&#8217;) as HTMLElement<br \/>\n    const popElement = document.querySelector(&#8216;.my-editor-popup&#8217;) as HTMLElement<br \/>\n    const headerElement = document.querySelector(&#8216;.t-navbar&#8217;) as HTMLElement<br \/>\n    if (popElement) {<br \/>\n      editorWorkspase.style.height = `calc(100vh &#8211; ${popElement?.offsetHeight + headerElement?.offsetHeight || 0}px)`<br \/>\n    } else {<br \/>\n      editorWorkspase.style.height = &#8221;<br \/>\n    }<br \/>\n  }<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  6. \u0645\u0646\u0648\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631<\/p>\n<p>\u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0639\u0645\u0644\u06cc\u0627\u062a \u0645\u06cc\u0627\u0646\u0628\u0631 \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u0646\u062f \u062a\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0639\u0645\u0644\u06cc\u0627\u062a \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0648 \u062a\u06a9\u0645\u06cc\u0644 \u06a9\u0646\u0646\u062f. \u0645\u0627 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0645\u0646\u0648\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631 \u0628\u0647 \u0639\u0646\u0635\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u062a\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0627\u062f\u0647 \u0646\u0634\u0648\u062f \u0631\u0648\u06cc \u0646\u0648\u0627\u0631 \u0645\u0646\u0648\u06cc \u067e\u0627\u06cc\u06cc\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u0646\u062f. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0639\u0646\u0635\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u0634\u0648\u062f\u060c \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0627 \u0628\u0631\u062f\u0627\u0634\u062a\u0646 \u0639\u0644\u0627\u0645\u062a \u067e\u0646\u0647\u0627\u0646 \u0645\u06cc \u0634\u0648\u062f. \u0644\u0627\u0632\u0645 \u0628\u0647 \u0630\u06a9\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0646\u0648\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0627\u0644\u0627\u06cc \u0639\u0646\u0635\u0631 \u0646\u06cc\u0633\u062a. \u0645\u0646\u0648\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631 \u0628\u0627\u06cc\u062f \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0648\u0642\u0639\u06cc\u062a \u0639\u0646\u0635\u0631 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0648\u0645 \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u062f. \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0646\u0648 \u0627\u0632 \u0646\u0627\u062d\u06cc\u0647 \u0628\u0648\u0645 \u0641\u0631\u0627\u062a\u0631 \u0631\u0641\u062a\u060c \u0628\u0627\u06cc\u062f \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u0646\u0648 \u0631\u0627 \u0628\u0647 \u0645\u0648\u0642\u0639 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u062f\u0631 \u067e\u0627\u067e \u0622\u067e \u0648\u06cc\u0698\u06af\u06cc \u0638\u0627\u0647\u0631 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0648\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u0646\u0648 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0637\u0648\u0631 \u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u0635\u0644\u0627\u062d \u0634\u0648\u062f.<\/p>\n<p>\/\/ \u66f4\u65b0\u4f4d\u7f6e\u4fe1\u606f<br \/>\nconst upDatePosition = async () =&gt; {<br \/>\n  const activeObject = canvasEditor.canvas.getActiveObject();<br \/>\n  if (activeObject) {<br \/>\n    canvasEditor.canvas.renderAll();<br \/>\n    fixLeft.value = 10;<br \/>\n    fixTop.value = 10;<br \/>\n    await nextTick();<br \/>\n    isIncluded(activeObject);<br \/>\n    await nextTick();<br \/>\n  }<br \/>\n}<\/p>\n<p>\/\/ \u76d1\u542c\u9009\u4e2d\u5bf9\u8c61\u53d8\u5316\u66f4\u65b0\u4f4d\u7f6e\u4fe1\u606f<br \/>\ngetObjectAttr(upDatePosition)<br \/>\ncanvasEditor.canvas.on(&#8216;selection:updated&#8217;, upDatePosition)<br \/>\ncanvasEditor.canvas.on(&#8216;mouse:move&#8217;, upDatePosition)<br \/>\ncanvasEditor.on(&#8216;workspaceAutoEvent&#8217;, upDatePosition)<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  7. \u0646\u0648\u0627\u0631 \u0627\u0628\u0632\u0627\u0631 \u062e\u0648\u0627\u0635<\/p>\n<p>\u0628\u0627 \u0645\u0631\u0627\u062c\u0639\u0647 \u0628\u0647 \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631\u060c \u0628\u0631\u062e\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u062a\u0646\u0647\u0627 \u067e\u0633 \u0627\u0632 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u062e\u0648\u0627\u0647\u0646\u062f \u062f\u0627\u0634\u062a. \u062f\u0631 \u0635\u0648\u0631\u062a \u0644\u063a\u0648 \u0627\u0646\u062a\u062e\u0627\u0628\u060c \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u067e\u0646\u0647\u0627\u0646 \u0645\u06cc \u0634\u0648\u0646\u062f. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0639\u0646\u0627\u0635\u0631 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0645\u062e\u062a\u0644\u0641 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u062e\u0648\u0627\u0647\u0646\u062f \u062f\u0627\u0634\u062a. \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u0639\u0627\u0645\u0644 \u0628\u0633\u06cc\u0627\u0631 \u0639\u0627\u0644\u06cc \u062f\u0631 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646\u0647 \u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u0627\u0633\u062a.<\/p>\n<p>\u0645\u0627 \u0627\u0646\u0648\u0627\u0639 \u0648 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0631\u0627\u06cc\u062c \u0631\u0627 \u06a9\u067e\u0633\u0648\u0644\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u0648 \u067e\u0646\u0647\u0627\u0646 \u06a9\u0631\u062f\u0646\/\u0646\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0628\u0647\u200c\u0637\u0648\u0631 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 \u062c\u0632\u0621 \u0648\u06cc\u0698\u06af\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645.<\/p>\n<p>  8. \u0641\u0648\u0646\u062a \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0648\u06cc\u0698\u0647<\/p>\n<p>\u0641\u0648\u0646\u062a \u0647\u0627\u06cc \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0648\u06cc\u0698\u0647 \u0639\u0645\u062f\u062a\u0627\u064b \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0632 \u0631\u0646\u06af\u060c \u062d\u0627\u0634\u06cc\u0647 \u0648 \u0633\u0627\u06cc\u0647 \u0639\u0646\u0627\u0635\u0631 \u0645\u062a\u0646 \u0647\u0633\u062a\u0646\u062f. \u0645\u0627 JSON \u0631\u0627 \u067e\u0633 \u0627\u0632 \u062a\u0646\u0638\u06cc\u0645 \u0633\u0628\u06a9 \u0645\u062a\u0646 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u062c\u0644\u0648\u0647 \u0648\u06cc\u0698\u0647 \u062e\u0627\u0635 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u0634\u0648\u062f\u060c \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 JSON \u0631\u0648\u06cc \u0639\u0646\u0635\u0631 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<p>const setStyle = (item: ImgItem) =&gt; {<br \/>\n  const activeObject = canvasEditor.canvas.getActiveObjects()[0];<br \/>\n  if (activeObject) {<br \/>\n    const values = toRaw(item.json);<br \/>\n    const keys = [&#8216;fill&#8217;, &#8216;stroke&#8217;, &#8216;strokeWidth&#8217;, &#8216;shadow&#8217;, &#8216;strokeLineCap&#8217;];<br \/>\n    activeObject.set(&#8216;paintFirst&#8217;, &#8216;stroke&#8217;);<br \/>\n    keys.forEach((key) =&gt; {<br \/>\n      activeObject.set(key, values[key]);<br \/>\n      if (key === &#8216;fill&#8217; &amp;&amp; typeof values[key] != &#8216;string&#8217;) {<br \/>\n        activeObject.set(key, new fabric.Gradient(values[key]));<br \/>\n      }<br \/>\n    });<br \/>\n    canvasEditor.canvas.renderAll();<br \/>\n  }<br \/>\n};<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  9. \u0641\u0648\u0646\u062a \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<\/p>\n<p>\u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0641\u0648\u0646\u062a\u060c \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc \u00abfontFamily\u00bb \u0639\u0646\u0635\u0631 structure.js \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f. \u0642\u0628\u0644 \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631 \u0641\u0648\u0646\u062a\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0641\u0648\u0646\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<p>const changeCommon = async (key: string, value: any) =&gt; {<br \/>\n  const activeObject = canvasEditor.canvas.getActiveObjects()[0];<br \/>\n  if (activeObject) {<br \/>\n    LoadingPlugin(true);<br \/>\n    baseAttr.fontFamily = value;<br \/>\n    try {<br \/>\n      await canvasEditor.loadFont(value)<br \/>\n    } catch (error) {<br \/>\n      console.log(error)<br \/>\n    }<br \/>\n    LoadingPlugin(false);<br \/>\n    activeObject &amp;&amp; activeObject.set(key, value);<br \/>\n    canvasEditor.canvas.renderAll();<br \/>\n  }<br \/>\n};<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  10. \u0645\u062a\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/p>\n<p>Fabric.js \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0627 \u062f\u0648\u0628\u0627\u0631 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0631\u0648\u06cc \u0639\u0646\u0635\u0631 \u0645\u062a\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u062a\u0639\u0627\u0645\u0644 \u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647 \u0646\u06cc\u0633\u062a. \u0645\u0627 \u0639\u0646\u0635\u0631 \u0645\u062a\u0646 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0627\u06cc\u0645. \u067e\u0633 \u0627\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u0639\u0646\u0635\u0631\u060c \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0645\u062c\u062f\u062f \u06a9\u0627\u062f\u0631 \u0645\u062a\u0646\u06cc \u0638\u0627\u0647\u0631 \u0645\u06cc \u0634\u0648\u062f. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u062f\u0631 \u0646\u0648\u0627\u0631 \u0645\u0646\u0648\u06cc \u067e\u0627\u06cc\u06cc\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<p>  11. \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0645\u062a\u0646<\/p>\n<p>\u062d\u0631\u0648\u0641\u0686\u06cc\u0646\u06cc \u0645\u062a\u0646 \u0646\u0633\u0628\u062a\u0627\u064b \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u0645\u0627 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062a\u0646 \u0631\u0627 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062a\u0646 \u067e\u0627\u0631\u0686\u0647 \u0647\u0627 \u0645\u0627\u0646\u0646\u062f fontSize\u060c lineHeight\u060c charSpacing \u0648 \u063a\u06cc\u0631\u0647 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645.<\/p>\n<p>\/\/ \u5c5e\u6027\u503c<br \/>\nconst baseAttr = reactive({<\/p>\n<p>  fontSize: 0,<br \/>\n  lineHeight: 0,<br \/>\n  charSpacing: 0,<br \/>\n  textAlign: &#8221;,<\/p>\n<p>  fontWeight: &#8221;,<br \/>\n  fontStyle: &#8221;,<\/p>\n<p>  underline: false,<br \/>\n  linethrough: false,<br \/>\n  overline: false,<br \/>\n});<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  12. \u0645\u0631\u0632<\/p>\n<p>\u0633\u0628\u06a9 \u062d\u0627\u0634\u06cc\u0647 \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0633\u0628\u06a9 \u0645\u062a\u0646 \u0627\u0633\u062a \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0628\u0627 \u0645\u0648\u0644\u0641\u0647 \u0631\u0646\u06af \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0631\u062f.<\/p>\n<p>\/\/ \u5c5e\u6027\u503c<br \/>\nconst baseAttr = reactive({<br \/>\n  stroke: &#8216;#fff&#8217;,<br \/>\n  strokeWidth: 0,<br \/>\n  strokeDashArray: [],<br \/>\n});<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  13. \u0633\u0627\u06cc\u0647<\/p>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0645\u0631\u062c\u0639 \u0639\u0645\u062f\u062a\u0627\u064b \u0627\u0635\u0644\u0627\u062d\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0641\u0631\u0639\u06cc \u0633\u0627\u06cc\u0647 \u0639\u0646\u0635\u0631 \u0627\u0633\u062a. \u06a9\u062f \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<p>\/\/ \u5c5e\u6027\u503c<br \/>\nconst baseAttr = reactive({<br \/>\n  shadow: {<br \/>\n    color: &#8216;#fff&#8217;,<br \/>\n    blur: 0,<br \/>\n    offsetX: 1,<br \/>\n    offsetY: 1,<br \/>\n  }<br \/>\n});<\/p>\n<p>\/\/ \u901a\u7528\u5c5e\u6027\u6539\u53d8<br \/>\nconst changeCommon = () =&gt; {<br \/>\n  const activeObject = canvasEditor.canvas.getActiveObjects()[0];<br \/>\n  if (activeObject) {<br \/>\n    activeObject.set(&#8216;shadow&#8217;, new fabric.Shadow(baseAttr.shadow));<br \/>\n    canvasEditor.canvas.renderAll();<br \/>\n  }<br \/>\n};<\/p>\n<p>    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n<p>    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n<p>  14. \u062f\u0627\u0646\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631<\/p>\n<p>\u067e\u0627\u0631\u0686\u0647.js \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc Png\/Jpeg\/Base64 \u0635\u0627\u062f\u0631 \u06a9\u0646\u062f. \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644\u060c \u0628\u0631\u0627\u06cc \u0641\u0631\u0645\u062a JPEG\u060c \u06a9\u06cc\u0641\u06cc\u062a \u062a\u0635\u0648\u06cc\u0631 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0686\u0646\u062f\u06af\u0627\u0646\u0647 \u0646\u06cc\u0632 \u0642\u0627\u0628\u0644 \u062a\u0639\u06cc\u06cc\u0646 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u062c\u0632\u0626\u06cc\u0627\u062a\u060c \u0644\u0637\u0641\u0627\u064b \u0628\u0647 \u0627\u0633\u0646\u0627\u062f API \u067e\u0627\u0631\u0686\u0647.js \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0645\u0648\u0627\u0631\u062f \u0641\u0648\u0642 \u062c\u0632\u06cc\u06cc\u0627\u062a \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0628\u0627 fabric.js \u0647\u0633\u062a\u0646\u062f. \u062f\u0631 \u062a\u0631\u06a9\u06cc\u0628 \u0628\u0627 \u067e\u0631\u0648\u0698\u0647 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0648 \u0645\u0639\u0645\u0627\u0631\u06cc \u067e\u0644\u0627\u06af\u06cc\u0646 \u0645\u0627\u060c \u062a\u0648\u0633\u0639\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u062a\u06a9\u0645\u06cc\u0644 \u0634\u0648\u062f. \u0627\u06af\u0631 \u0631\u0648\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0634\u0627\u0628\u0647\u06cc \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u067e\u0631\u0648\u0698\u0647 \u0645\u0634\u0627\u0628\u0647\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u062f\u060c \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f \u0628\u0627 \u0645\u0646 \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<p>\u067e\u0631\u0648\u0698\u0647 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632\uff1ahttps:\/\/github.com\/ikuaitu\/vue-fabric-editor\/blob\/main\/README-zh.md<\/p>\n<div data-article-id=\"2010711\" id=\"article-body\">\n<p>\u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u0647! \u0645\u0646 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u062f\u0631 https:\/\/github.com\/ikuaitu\/vue-fabric-editor \u0647\u0633\u062a\u0645. \u0627\u06cc\u0646 \u06cc\u06a9 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0646\u0633\u062e\u0647 \u0631\u0627\u06cc\u0627\u0646\u0647 \u0634\u062e\u0635\u06cc \u0627\u0633\u062a.<\/p>\n<p>\u0627\u062e\u06cc\u0631\u0627\u060c \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u06cc\u0646 \u0633\u0648\u0627\u0644 \u0631\u0627 \u0645\u0637\u0631\u062d \u06a9\u0631\u062f\u0647 \u0627\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0646\u0633\u062e\u0647 H5 \u0645\u0646\u0627\u0633\u0628 \u0628\u0631\u0627\u06cc \u067e\u0627\u06cc\u0627\u0646\u0647 \u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062f. \u0627\u062e\u06cc\u0631\u0627\u064b\u060c \u0628\u0647 \u0645\u062d\u0636 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0646\u0633\u062e\u0647 H5 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631\u060c \u0627\u06cc\u062f\u0647\u200c\u0647\u0627\u06cc \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0648 \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u062d\u0635\u0648\u0644 \u0631\u0627 \u062f\u0631 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a\u200c\u0647\u0627\u06cc\u06cc \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u06a9\u0631\u062f\u0645 \u0648 \u0628\u0631\u0627\u06cc \u0645\u0631\u062c\u0639 \u0634\u0645\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0634\u062a\u0645.<\/p>\n<p><\/p>\n<p>\u0639\u0645\u0644\u06a9\u0631\u062f\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0645\u0627\u0646\u0646\u062f \u062a\u063a\u06cc\u06cc\u0631 \u0642\u0627\u0644\u0628 \u0647\u0627\u060c \u0627\u0641\u0632\u0648\u062f\u0646 \u0639\u0646\u0627\u0635\u0631\u060c \u0641\u0648\u0646\u062a \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0648 \u063a\u06cc\u0631\u0647 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0647\u0633\u062a\u0646\u062f\u060c \u0627\u0645\u0627 \u062f\u0631 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0628\u0627 \u062a\u0639\u0627\u0645\u0644 \u062f\u0631 \u0633\u0645\u062a \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647\u060c \u062a\u0641\u0627\u0648\u062a \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631\u0627\u062a \u0632\u06cc\u0627\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a. . \u0627\u06cc\u0646 \u06cc\u0627\u062f\u062f\u0627\u0634\u062a \u0639\u0645\u062f\u062a\u0627 \u0627\u06cc\u062f\u0647 \u0648 \u062c\u0632\u0626\u06cc\u0627\u062a \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0645\u06cc\u200c\u06af\u0630\u0627\u0631\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F84nj9943854ldef1q9be.png\" alt=\"\u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 1\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkqqxq32cyczv80c84yx9.png\" alt=\"\u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 2\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxog0gb5jqmujtygtfiav.png\" alt=\"\u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 3\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<ol>\n<li>\u062a\u063a\u06cc\u06cc\u0631 \u0642\u0627\u0644\u0628 \u0647\u0627<\/li>\n<li>\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631<\/li>\n<li>\u0639\u0646\u0627\u0635\u0631 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u062a\u0646\u0638\u06cc\u0645 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647<\/li>\n<li>\u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0648\u0645<\/li>\n<li>\u0645\u0646\u0648\u06cc \u0633\u0631\u06cc\u0639<\/li>\n<li>\u0646\u0648\u0627\u0631 \u0627\u0628\u0632\u0627\u0631 \u062e\u0648\u0627\u0635.<\/li>\n<li>\u0641\u0648\u0646\u062a \u0647\u0627\u06cc \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0648\u06cc\u0698\u0647<\/li>\n<li>\u062a\u063a\u06cc\u06cc\u0631 \u0641\u0648\u0646\u062a<\/li>\n<li>\u0645\u062a\u0646 \u0648\u0631\u0648\u062f\u06cc<\/li>\n<li>\u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0645\u062a\u0646<\/li>\n<li>\u0645\u0631\u0632.<\/li>\n<li>\u0633\u0627\u06cc\u0647.<\/li>\n<li>\u062f\u0627\u0646\u0644\u0648\u062f \u062a\u0635\u0627\u0648\u06cc\u0631.<\/li>\n<\/ol>\n<blockquote>\n<p>\u062a\u0648\u062c\u0647: \u0628\u0631\u062e\u06cc \u0627\u0632 \u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u06a9\u062f \u06a9\u062f \u0628\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0634\u062f\u0647\u200c\u0627\u0646\u062f \u0648 \u0628\u0648\u0645\u06cc \u067e\u0627\u0631\u0686\u0647\u200c\u0627\u06cc \u0646\u06cc\u0633\u062a\u0646\u062f.<\/p>\n<\/blockquote>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#1_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%A7%D9%84%DA%AF%D9%88\" >1. \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0644\u06af\u0648<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#2_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\" >2. \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062a\u0635\u0648\u06cc\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#3_%D8%B9%D9%86%D8%B5%D8%B1_%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8%DB%8C_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\" >3. \u0639\u0646\u0635\u0631 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#4_%D8%B1%D9%86%DA%AF_%D9%BE%D8%B3_%D8%B2%D9%85%DB%8C%D9%86%D9%87_%D8%B1%D8%A7_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%DB%8C%D8%AF\" >4. \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#5_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87_%D8%A8%D9%88%D9%85_%D8%B1%D8%A7_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF\" >5. \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0648\u0645 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#6_%D9%85%D9%86%D9%88%DB%8C_%D9%85%DB%8C%D8%A7%D9%86%D8%A8%D8%B1\" >6. \u0645\u0646\u0648\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#7_%D9%86%D9%88%D8%A7%D8%B1_%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1_%D8%AE%D9%88%D8%A7%D8%B5\" >7. \u0646\u0648\u0627\u0631 \u0627\u0628\u0632\u0627\u0631 \u062e\u0648\u0627\u0635<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#8_%D9%81%D9%88%D9%86%D8%AA_%D8%AC%D9%84%D9%88%D9%87_%D9%87%D8%A7%DB%8C_%D9%88%DB%8C%DA%98%D9%87\" >8. \u0641\u0648\u0646\u062a \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0648\u06cc\u0698\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#9_%D9%81%D9%88%D9%86%D8%AA_%D8%B1%D8%A7_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF\" >9. \u0641\u0648\u0646\u062a \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#10_%D9%85%D8%AA%D9%86_%D8%B1%D8%A7_%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >10. \u0645\u062a\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#11_%D8%B7%D8%B1%D8%AD_%D8%A8%D9%86%D8%AF%DB%8C_%D9%85%D8%AA%D9%86\" >11. \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0645\u062a\u0646<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#12_%D9%85%D8%B1%D8%B2\" >12. \u0645\u0631\u0632<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#13_%D8%B3%D8%A7%DB%8C%D9%87\" >13. \u0633\u0627\u06cc\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/develop-mobile-h5-image-editor-details-using-fabricjs-4dki\/#14_%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\" >14. \u062f\u0627\u0646\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"1_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%A7%D9%84%DA%AF%D9%88\"><\/span>\n<p>  1. \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0644\u06af\u0648<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyx2uiuka8882f6hmqj1p.gif\" alt=\"\u062a\u063a\u06cc\u06cc\u0631 \u0627\u0644\u06af\u0648\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>\u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u0628\u0631 \u0627\u0633\u0627\u0633 fabric.js \u062a\u0648\u0633\u0639\u0647 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a \u0648 \u062a\u0645\u0627\u0645 \u0642\u0627\u0644\u0628 \u0647\u0627 \u0628\u0627 \u0641\u0631\u0645\u062a json \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u0646\u062f. \u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0644\u06af\u0648\u0647\u0627\u060c \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0631\u0627\u0628\u0637 \u062c\u0632\u0626\u06cc\u0627\u062a \u0631\u0627 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0646\u06cc\u062f \u0648 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0627 \u0641\u0631\u0645\u062a json \u0628\u0647 \u0628\u0648\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f. \u0644\u0627\u0632\u0645 \u0627\u0633\u062a \u0642\u0628\u0644 \u0627\u0632 \u0631\u0646\u062f\u0631 \u0628\u0647 \u0646\u0627\u0645 \u0641\u0648\u0646\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0642\u0627\u0644\u0628 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u0648 \u0641\u0627\u06cc\u0644 \u0641\u0648\u0646\u062a \u0631\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u06a9\u0646\u06cc\u062f. \u062f\u0631 \u063a\u06cc\u0631 \u0627\u06cc\u0646 \u0635\u0648\u0631\u062a \u0633\u0628\u06a9 \u0641\u0648\u0646\u062a \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0631\u0646\u062f\u0631 \u0646\u0645\u06cc \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">loadInfo<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">res<\/span><span class=\"p\">:<\/span> <span class=\"nx\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">info<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">res<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span>\n  <span class=\"nx\">templName<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">info<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">;<\/span>\n  <span class=\"k\">await<\/span> <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nf\">getFontList<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">info<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">));<\/span>\n  <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nf\">loadJSON<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">info<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">),<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nc\">LoadingPlugin<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">));<\/span>\n<span class=\"p\">};<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"2_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\"><\/span>\n<p>  2. \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062a\u0635\u0648\u06cc\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Facw18b4kz93eor9yiis9.gif\" alt=\"\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>\u0631\u0627\u0647\u200c\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0635\u0627\u0648\u06cc\u0631 \u062f\u0631 fabric.js \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 \u0633\u0627\u062f\u0647\u200c\u062a\u0631\u06cc\u0646 \u0622\u0646\u0647\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645 <code>fabric.Image.fromURL<\/code>\u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0627\u063a\u0644\u0628 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0632\u0631\u06af\u062a\u0631 \u0627\u0632 \u0628\u0648\u0645 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0627\u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0646\u062f\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0639\u0631\u0636 \u0628\u0648\u0645 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627\u062d\u062a \u062a\u0631 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">toEditor<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">:<\/span> <span class=\"nx\">MouseEvent<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">visible<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span>\n  <span class=\"nc\">LoadingPlugin<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">)<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">item<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nf\">createImgByElement<\/span><span class=\"p\">(<\/span><span class=\"nx\">e<\/span><span class=\"p\">.<\/span><span class=\"nx\">target<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">HTMLImageElement<\/span><span class=\"p\">)<\/span>\n  <span class=\"k\">await<\/span> <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nf\">addBaseType<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">scale<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span> <span class=\"p\">})<\/span>\n  <span class=\"nc\">LoadingPlugin<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">)<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"3_%D8%B9%D9%86%D8%B5%D8%B1_%D8%AA%D8%B1%DA%A9%DB%8C%D8%A8%DB%8C_%D8%B1%D8%A7_%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  3. \u0639\u0646\u0635\u0631 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp8a1mg1nimq7zh0l0dgx.gif\" alt=\"\u0639\u0646\u0635\u0631 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>Fabric.js \u0627\u0632 \u0635\u0627\u062f\u0631\u0627\u062a\/\u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062f\u0631 \u0642\u0627\u0644\u0628 JSON \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06af\u0631 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0635\u0627\u062f\u0631 \u0634\u062f\u0647 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0630\u062e\u06cc\u0631\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0646\u0648\u0639 \u0639\u0646\u0635\u0631 \u0647\u0646\u06af\u0627\u0645 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u0645. \u0628\u0627\u06cc\u062f \u0646\u0648\u0639 \u0639\u0646\u0635\u0631 \u0631\u0627 \u062f\u0631 JSON \u0628\u062f\u0633\u062a \u0622\u0648\u0631\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0646\u0627\u0645 \u0645\u062a\u062f \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u0645. \u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627\u06cc\u062f \u0642\u0628\u0644 \u0627\u0632 \u0648\u0627\u0631\u062f \u06a9\u0631\u062f\u0646 \u0641\u0648\u0646\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0648 \u0628\u0639\u062f \u0627\u0632 \u0631\u06cc\u062e\u062a\u0646 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0646\u062f\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">capitalizeFirstLetter<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">str<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">return<\/span> <span class=\"nx\">str<\/span><span class=\"p\">.<\/span><span class=\"nf\">charAt<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">).<\/span><span class=\"nf\">toUpperCase<\/span><span class=\"p\">()<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">str<\/span><span class=\"p\">.<\/span><span class=\"nf\">slice<\/span><span class=\"p\">(<\/span><span class=\"mi\">1<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">const<\/span> <span class=\"nx\">toEditor<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ItemProps<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nx\">visible<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span>\n  <span class=\"nc\">LoadingPlugin<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">)<\/span>\n  <span class=\"k\">await<\/span> <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nf\">downFontByJSON<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">));<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">el<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">parse<\/span><span class=\"p\">(<\/span><span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">));<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">elType<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">capitalizeFirstLetter<\/span><span class=\"p\">(<\/span><span class=\"nx\">el<\/span><span class=\"p\">.<\/span><span class=\"nx\">type<\/span><span class=\"p\">);<\/span>\n  <span class=\"k\">new<\/span> <span class=\"nx\">fabric<\/span><span class=\"p\">[<\/span><span class=\"nx\">elType<\/span><span class=\"p\">].<\/span><span class=\"nf\">fromObject<\/span><span class=\"p\">(<\/span><span class=\"nx\">el<\/span><span class=\"p\">,<\/span> <span class=\"p\">(<\/span><span class=\"na\">fabricEl<\/span><span class=\"p\">:<\/span> <span class=\"nx\">fabric<\/span><span class=\"p\">.<\/span><span class=\"nb\">Object<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nf\">dragAddItem<\/span><span class=\"p\">(<\/span><span class=\"nx\">fabricEl<\/span><span class=\"p\">);<\/span>\n    <span class=\"nc\">LoadingPlugin<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">)<\/span>\n  <span class=\"p\">});<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"4_%D8%B1%D9%86%DA%AF_%D9%BE%D8%B3_%D8%B2%D9%85%DB%8C%D9%86%D9%87_%D8%B1%D8%A7_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  4. \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7nquoslqjijhec6u3kgz.gif\" alt=\"\u062a\u0646\u0638\u06cc\u0645 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>\u062a\u0646\u0638\u06cc\u0645 \u0631\u0646\u06af \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0646\u0633\u0628\u062a\u0627 \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u0646\u06af \u0631\u0627 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 API \u067e\u0627\u0631\u0686\u0647 \u0647\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f. \u0644\u0627\u0632\u0645 \u0628\u0647 \u0630\u06a9\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0627\u06a9\u062b\u0631 \u0627\u062c\u0632\u0627\u06cc \u0631\u0646\u06af\u06cc \u062f\u0631 \u0633\u0645\u062a \u0631\u0627\u06cc\u0627\u0646\u0647 \u0634\u062e\u0635\u06cc \u0628\u0627 \u0635\u062d\u0646\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0627\u0646\u062a\u0647\u0627\u06cc H5 \u0633\u0627\u0632\u06af\u0627\u0631 \u0646\u06cc\u0633\u062a\u0646\u062f \u0648 \u0627\u0632 \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627\u06cc \u0644\u0645\u0633\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0646\u0645\u06cc \u06a9\u0646\u0646\u062f. \u0645\u0627 \u0627\u0632 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a &#8220;@jaames\/iro&#8221; \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u06cc\u0645 \u06a9\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u062e\u0648\u0628\u06cc \u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u062f\u0627\u0631\u062f \u0648 \u06a9\u0627\u0645\u0644\u0627\u064b \u0628\u0627 \u0635\u062d\u0646\u0647 \u0645\u0627 \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a. API \u0622\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0627\u0646\u0639\u0637\u0627\u0641 \u067e\u0630\u06cc\u0631 \u0627\u0633\u062a. \u0645\u0627 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u062c\u0632\u0621 \u0631\u0646\u06af \u0639\u0645\u0648\u0645\u06cc \u06a9\u067e\u0633\u0648\u0644\u0647 \u06a9\u0631\u062f\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u0686\u0646\u062f\u06cc\u0646 \u0645\u06a9\u0627\u0646 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0631\u062f\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code><template>\n  \n<\/template>\n\n<script setup=\"\" lang=\"ts\"><![CDATA[\nimport iro from '@jaames\/iro';\nconst emit = defineEmits(['update:modelValue', 'change']);\n\nconst props = defineProps({\n  modelValue: {\n    type: String,\n    default: '#000000'\n  },\n  width: {\n    type: Number,\n    default: 200\n  }\n});\n\nconst pickerContainer = ref<HTMLButtonElement | string>('');\nlet colorPicker: any = null;\n\nonMounted(() => {\n  \/\/ &#21019;&#24314;iro.js&#39068;&#33394;&#36873;&#25321;&#22120;\n  colorPicker = iro.ColorPicker(pickerContainer.value, {\n    width: props.width,\n    color: props.modelValue,\n    borderWidth: 1,\n    borderColor: \"#fff\",\n    layoutDirection: 'horizontal',\n    layout: [\n      {\n        component: iro.ui.Slider,\n        options: {\n          id: 'hue-slider',\n          sliderType: 'hue'\n        }\n      },\n      {\n        component: iro.ui.Box,\n      },\n      {\n        component: iro.ui.Slider,\n        options: {\n          sliderType: 'alpha'\n        }\n      }\n    ]\n  });\n\n  \/\/ &#30417;&#21548;&#39068;&#33394;&#21464;&#21270;&#20107;&#20214;&#24182;&#21457;&#23556;&#33258;&#23450;&#20041;&#20107;&#20214;\n  colorPicker.on('color:change', (color: any) => {\n    const rgbaString = color.rgbaString;\n    emit('update:modelValue', rgbaString);\n    emit('change', rgbaString);\n  });\n});\n\n]]><\/script>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"5_%D8%A7%D9%86%D8%AF%D8%A7%D8%B2%D9%87_%D8%A8%D9%88%D9%85_%D8%B1%D8%A7_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF\"><\/span>\n<p>  5. \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0648\u0645 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkirq0r9vg1xc8ybuqfnx.gif\" alt=\"\u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0648\u0645\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"kd\">const<\/span> <span class=\"nx\">resizeEditor<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">await<\/span> <span class=\"nf\">nextTick<\/span><span class=\"p\">()<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">editorWorkspase<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#workspace<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">HTMLElement<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">popElement<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.my-editor-popup<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">HTMLElement<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">headerElement<\/span> <span class=\"o\">=<\/span> <span class=\"nb\">document<\/span><span class=\"p\">.<\/span><span class=\"nf\">querySelector<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.t-navbar<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">HTMLElement<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">popElement<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">editorWorkspase<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">height<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`calc(100vh - <\/span><span class=\"p\">${<\/span><span class=\"nx\">popElement<\/span><span class=\"p\">?.<\/span><span class=\"nx\">offsetHeight<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">headerElement<\/span><span class=\"p\">?.<\/span><span class=\"nx\">offsetHeight<\/span> <span class=\"o\">||<\/span> <span class=\"mi\">0<\/span><span class=\"p\">}<\/span><span class=\"s2\">px)`<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">else<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">editorWorkspase<\/span><span class=\"p\">.<\/span><span class=\"nx\">style<\/span><span class=\"p\">.<\/span><span class=\"nx\">height<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"6_%D9%85%D9%86%D9%88%DB%8C_%D9%85%DB%8C%D8%A7%D9%86%D8%A8%D8%B1\"><\/span>\n<p>  6. \u0645\u0646\u0648\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsrpioabltj8kosy0mul6.gif\" alt=\"\u0645\u0646\u0648\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>\u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0639\u0645\u0644\u06cc\u0627\u062a \u0645\u06cc\u0627\u0646\u0628\u0631 \u0628\u0627\u06cc\u062f \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u0646\u062f \u062a\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0639\u0645\u0644\u06cc\u0627\u062a \u0631\u0627 \u067e\u06cc\u062f\u0627 \u0648 \u062a\u06a9\u0645\u06cc\u0644 \u06a9\u0646\u0646\u062f. \u0645\u0627 \u06cc\u06a9 \u062a\u0627\u0628\u0639 \u0645\u0646\u0648\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631 \u0628\u0647 \u0639\u0646\u0635\u0631 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u062a\u0627 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0627\u062c\u0627\u0632\u0647 \u062f\u0627\u062f\u0647 \u0646\u0634\u0648\u062f \u0631\u0648\u06cc \u0646\u0648\u0627\u0631 \u0645\u0646\u0648\u06cc \u067e\u0627\u06cc\u06cc\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u0646\u062f. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0639\u0646\u0635\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u0634\u0648\u062f\u060c \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0628\u0627 \u0628\u0631\u062f\u0627\u0634\u062a\u0646 \u0639\u0644\u0627\u0645\u062a \u067e\u0646\u0647\u0627\u0646 \u0645\u06cc \u0634\u0648\u062f. \u0644\u0627\u0632\u0645 \u0628\u0647 \u0630\u06a9\u0631 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0646\u0648\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631 \u0647\u0645\u06cc\u0634\u0647 \u0628\u0627\u0644\u0627\u06cc \u0639\u0646\u0635\u0631 \u0646\u06cc\u0633\u062a. \u0645\u0646\u0648\u06cc \u0645\u06cc\u0627\u0646\u0628\u0631 \u0628\u0627\u06cc\u062f \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0648\u0642\u0639\u06cc\u062a \u0639\u0646\u0635\u0631 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0648\u0645 \u0642\u0631\u0627\u0631 \u06af\u06cc\u0631\u062f. \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0645\u0646\u0648 \u0627\u0632 \u0646\u0627\u062d\u06cc\u0647 \u0628\u0648\u0645 \u0641\u0631\u0627\u062a\u0631 \u0631\u0641\u062a\u060c \u0628\u0627\u06cc\u062f \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u0646\u0648 \u0631\u0627 \u0628\u0647 \u0645\u0648\u0642\u0639 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06a9\u0627\u062f\u0631 \u067e\u0627\u067e \u0622\u067e \u0648\u06cc\u0698\u06af\u06cc \u0638\u0627\u0647\u0631 \u0645\u06cc \u0634\u0648\u062f \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0648\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u062f\u060c \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u0646\u0648 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0637\u0648\u0631 \u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u0635\u0644\u0627\u062d \u0634\u0648\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ \u66f4\u65b0\u4f4d\u7f6e\u4fe1\u606f\nconst upDatePosition = async () =&gt; {\n  const activeObject = canvasEditor.canvas.getActiveObject();\n  if (activeObject) {\n    canvasEditor.canvas.renderAll();\n    fixLeft.value = 10;\n    fixTop.value = 10;\n    await nextTick();\n    isIncluded(activeObject);\n    await nextTick();\n  }\n}\n\n\/\/ \u76d1\u542c\u9009\u4e2d\u5bf9\u8c61\u53d8\u5316\u66f4\u65b0\u4f4d\u7f6e\u4fe1\u606f\ngetObjectAttr(upDatePosition)\ncanvasEditor.canvas.on('selection:updated', upDatePosition)\ncanvasEditor.canvas.on('mouse:move', upDatePosition)\ncanvasEditor.on('workspaceAutoEvent', upDatePosition)\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"7_%D9%86%D9%88%D8%A7%D8%B1_%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1_%D8%AE%D9%88%D8%A7%D8%B5\"><\/span>\n<p>  7. \u0646\u0648\u0627\u0631 \u0627\u0628\u0632\u0627\u0631 \u062e\u0648\u0627\u0635<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhzi9cs1k68irqlyb0tyk.gif\" alt=\"\u0646\u0648\u0627\u0631 \u0627\u0628\u0632\u0627\u0631 \u062e\u0648\u0627\u0635\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>\u0628\u0627 \u0645\u0631\u0627\u062c\u0639\u0647 \u0628\u0647 \u0633\u0627\u06cc\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631\u0647\u0627\u06cc \u062a\u0635\u0648\u06cc\u0631\u060c \u0628\u0631\u062e\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u062a\u0646\u0647\u0627 \u067e\u0633 \u0627\u0632 \u06a9\u0644\u06cc\u06a9 \u0631\u0648\u06cc \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u062e\u0648\u0627\u0647\u0646\u062f \u062f\u0627\u0634\u062a. \u062f\u0631 \u0635\u0648\u0631\u062a \u0644\u063a\u0648 \u0627\u0646\u062a\u062e\u0627\u0628\u060c \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u067e\u0646\u0647\u0627\u0646 \u0645\u06cc \u0634\u0648\u0646\u062f. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u0639\u0646\u0627\u0635\u0631 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0645\u062e\u062a\u0644\u0641 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u062a\u0641\u0627\u0648\u062a\u06cc \u062e\u0648\u0627\u0647\u0646\u062f \u062f\u0627\u0634\u062a. \u0627\u06cc\u0646 \u06cc\u06a9 \u062a\u0639\u0627\u0645\u0644 \u0628\u0633\u06cc\u0627\u0631 \u0639\u0627\u0644\u06cc \u062f\u0631 \u0633\u0627\u062e\u062a \u06cc\u06a9 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062f\u0631 \u067e\u0627\u06cc\u0627\u0646\u0647 \u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u0627\u0633\u062a.<\/p>\n<p>\u0645\u0627 \u0627\u0646\u0648\u0627\u0639 \u0648 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u0631\u0627\u06cc\u062c \u0631\u0627 \u06a9\u067e\u0633\u0648\u0644\u0647 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u0648 \u067e\u0646\u0647\u0627\u0646 \u06a9\u0631\u062f\u0646\/\u0646\u0645\u0627\u06cc\u0634 \u0631\u0627 \u0628\u0647\u200c\u0637\u0648\u0631 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0628\u0631\u0627\u06cc \u0647\u0631 \u062c\u0632\u0621 \u0648\u06cc\u0698\u06af\u06cc \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F89f95ph3bxoly6l7rnng.png\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"8_%D9%81%D9%88%D9%86%D8%AA_%D8%AC%D9%84%D9%88%D9%87_%D9%87%D8%A7%DB%8C_%D9%88%DB%8C%DA%98%D9%87\"><\/span>\n<p>  8. \u0641\u0648\u0646\u062a \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0648\u06cc\u0698\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4asnb2l47bzq6vdt1tkc.gif\" alt=\"\u0641\u0648\u0646\u062a \u0647\u0627\u06cc \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0648\u06cc\u0698\u0647\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>\u0641\u0648\u0646\u062a \u0647\u0627\u06cc \u062c\u0644\u0648\u0647 \u0647\u0627\u06cc \u0648\u06cc\u0698\u0647 \u0639\u0645\u062f\u062a\u0627\u064b \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0627\u0632 \u0631\u0646\u06af\u060c \u062d\u0627\u0634\u06cc\u0647 \u0648 \u0633\u0627\u06cc\u0647 \u0639\u0646\u0627\u0635\u0631 \u0645\u062a\u0646 \u0647\u0633\u062a\u0646\u062f. \u0645\u0627 JSON \u0631\u0627 \u067e\u0633 \u0627\u0632 \u062a\u0646\u0638\u06cc\u0645 \u0633\u0628\u06a9 \u0645\u062a\u0646 \u0635\u0627\u062f\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0630\u062e\u06cc\u0631\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u06cc\u06a9 \u062c\u0644\u0648\u0647 \u0648\u06cc\u0698\u0647 \u062e\u0627\u0635 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc \u0634\u0648\u062f\u060c \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0645\u0648\u062c\u0648\u062f \u062f\u0631 JSON \u0631\u0648\u06cc \u0639\u0646\u0635\u0631 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"kd\">const<\/span> <span class=\"nx\">setStyle<\/span> <span class=\"o\">=<\/span> <span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">:<\/span> <span class=\"nx\">ImgItem<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">activeObject<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nx\">canvas<\/span><span class=\"p\">.<\/span><span class=\"nf\">getActiveObjects<\/span><span class=\"p\">()[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">activeObject<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">values<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">toRaw<\/span><span class=\"p\">(<\/span><span class=\"nx\">item<\/span><span class=\"p\">.<\/span><span class=\"nx\">json<\/span><span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">keys<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">fill<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">stroke<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">strokeWidth<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">shadow<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">strokeLineCap<\/span><span class=\"dl\">'<\/span><span class=\"p\">];<\/span>\n    <span class=\"nx\">activeObject<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">paintFirst<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">stroke<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">keys<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">((<\/span><span class=\"nx\">key<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">activeObject<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">,<\/span> <span class=\"nx\">values<\/span><span class=\"p\">[<\/span><span class=\"nx\">key<\/span><span class=\"p\">]);<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span> <span class=\"o\">===<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">fill<\/span><span class=\"dl\">'<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"k\">typeof<\/span> <span class=\"nx\">values<\/span><span class=\"p\">[<\/span><span class=\"nx\">key<\/span><span class=\"p\">]<\/span> <span class=\"o\">!=<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">string<\/span><span class=\"dl\">'<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"nx\">activeObject<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">,<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">fabric<\/span><span class=\"p\">.<\/span><span class=\"nc\">Gradient<\/span><span class=\"p\">(<\/span><span class=\"nx\">values<\/span><span class=\"p\">[<\/span><span class=\"nx\">key<\/span><span class=\"p\">]));<\/span>\n      <span class=\"p\">}<\/span>\n    <span class=\"p\">});<\/span>\n    <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nx\">canvas<\/span><span class=\"p\">.<\/span><span class=\"nf\">renderAll<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"9_%D9%81%D9%88%D9%86%D8%AA_%D8%B1%D8%A7_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%AF%D9%87%DB%8C%D8%AF\"><\/span>\n<p>  9. \u0641\u0648\u0646\u062a \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvk5gp0hbs98nwxzhtq6a.gif\" alt=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>\u0628\u0631\u0627\u06cc \u062a\u063a\u06cc\u06cc\u0631 \u0641\u0648\u0646\u062a\u060c \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc \u00abfontFamily\u00bb \u0639\u0646\u0635\u0631 structure.js \u0631\u0627 \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u06a9\u0646\u06cc\u062f. \u0642\u0628\u0644 \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631 \u0641\u0648\u0646\u062a\u060c \u0645\u0637\u0645\u0626\u0646 \u0634\u0648\u06cc\u062f \u06a9\u0647 \u0641\u0648\u0646\u062a \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code>\n<span class=\"kd\">const<\/span> <span class=\"nx\">changeCommon<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">:<\/span> <span class=\"nx\">string<\/span><span class=\"p\">,<\/span> <span class=\"nx\">value<\/span><span class=\"p\">:<\/span> <span class=\"nx\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">activeObject<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nx\">canvas<\/span><span class=\"p\">.<\/span><span class=\"nf\">getActiveObjects<\/span><span class=\"p\">()[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">activeObject<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nc\">LoadingPlugin<\/span><span class=\"p\">(<\/span><span class=\"kc\">true<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">baseAttr<\/span><span class=\"p\">.<\/span><span class=\"nx\">fontFamily<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">value<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">try<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">await<\/span> <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nf\">loadFont<\/span><span class=\"p\">(<\/span><span class=\"nx\">value<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span> <span class=\"k\">catch <\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n      <span class=\"nx\">console<\/span><span class=\"p\">.<\/span><span class=\"nf\">log<\/span><span class=\"p\">(<\/span><span class=\"nx\">error<\/span><span class=\"p\">)<\/span>\n    <span class=\"p\">}<\/span>\n    <span class=\"nc\">LoadingPlugin<\/span><span class=\"p\">(<\/span><span class=\"kc\">false<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">activeObject<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"nx\">activeObject<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"nx\">key<\/span><span class=\"p\">,<\/span> <span class=\"nx\">value<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nx\">canvas<\/span><span class=\"p\">.<\/span><span class=\"nf\">renderAll<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"10_%D9%85%D8%AA%D9%86_%D8%B1%D8%A7_%D9%88%D8%A7%D8%B1%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  10. \u0645\u062a\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy33z7maq2mxl4db42m7x.gif\" alt=\"\u0645\u062a\u0646 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>Fabric.js \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0627 \u062f\u0648\u0628\u0627\u0631 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u0645\u0633\u062a\u0642\u06cc\u0645 \u0631\u0648\u06cc \u0639\u0646\u0635\u0631 \u0645\u062a\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u060c \u0627\u0645\u0627 \u0627\u06cc\u0646 \u062a\u0639\u0627\u0645\u0644 \u062f\u0631 \u0627\u0646\u062a\u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647 \u0646\u06cc\u0633\u062a. \u0645\u0627 \u0639\u0646\u0635\u0631 \u0645\u062a\u0646 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0627\u06cc\u0645. \u067e\u0633 \u0627\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u0639\u0646\u0635\u0631\u060c \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u0645\u062c\u062f\u062f \u06a9\u0627\u062f\u0631 \u0645\u062a\u0646\u06cc \u0638\u0627\u0647\u0631 \u0645\u06cc \u0634\u0648\u062f. \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u0648\u06cc \u062f\u06a9\u0645\u0647 \u062f\u0631 \u0646\u0648\u0627\u0631 \u0645\u0646\u0648\u06cc \u067e\u0627\u06cc\u06cc\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"11_%D8%B7%D8%B1%D8%AD_%D8%A8%D9%86%D8%AF%DB%8C_%D9%85%D8%AA%D9%86\"><\/span>\n<p>  11. \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0645\u062a\u0646<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faur7dgnrlfyg4vm3irgo.gif\" alt=\"\u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0645\u062a\u0646\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>\u062d\u0631\u0648\u0641\u0686\u06cc\u0646\u06cc \u0645\u062a\u0646 \u0646\u0633\u0628\u062a\u0627\u064b \u0633\u0627\u062f\u0647 \u0627\u0633\u062a. \u0645\u0627 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062a\u0646 \u0631\u0627 \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062a\u0646 \u067e\u0627\u0631\u0686\u0647 \u0647\u0627 \u0645\u0627\u0646\u0646\u062f fontSize\u060c lineHeight\u060c charSpacing \u0648 \u063a\u06cc\u0631\u0647 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ \u5c5e\u6027\u503c<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">baseAttr<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">reactive<\/span><span class=\"p\">({<\/span>\n\n  <span class=\"na\">fontSize<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">lineHeight<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">charSpacing<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">textAlign<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"na\">fontWeight<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">fontStyle<\/span><span class=\"p\">:<\/span> <span class=\"dl\">''<\/span><span class=\"p\">,<\/span>\n\n  <span class=\"na\">underline<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">linethrough<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">overline<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span><span class=\"p\">,<\/span>\n<span class=\"p\">});<\/span>\n\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"12_%D9%85%D8%B1%D8%B2\"><\/span>\n<p>  12. \u0645\u0631\u0632<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbjk28v23kj53khrmbi1m.gif\" alt=\"\u0645\u0631\u0632\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>\u0633\u0628\u06a9 \u062d\u0627\u0634\u06cc\u0647 \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0633\u0628\u06a9 \u0645\u062a\u0646 \u0627\u0633\u062a \u0648 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0633\u0631\u0639\u062a \u0628\u0627 \u0645\u0648\u0644\u0641\u0647 \u0631\u0646\u06af \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u06a9\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ \u5c5e\u6027\u503c<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">baseAttr<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">reactive<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">stroke<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#fff<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">strokeWidth<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">strokeDashArray<\/span><span class=\"p\">:<\/span> <span class=\"p\">[],<\/span>\n<span class=\"p\">});<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"13_%D8%B3%D8%A7%DB%8C%D9%87\"><\/span>\n<p>  13. \u0633\u0627\u06cc\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/media.dev.to\/cdn-cgi\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5wylk0fjr5gpa3zmm1ay.gif\" alt=\"\u0633\u0627\u06cc\u0647\" loading=\"lazy\" width=\"\" height=\"\" title=\"\"><\/p>\n<p>\u0648\u06cc\u0698\u06af\u06cc \u0645\u0631\u062c\u0639 \u0639\u0645\u062f\u062a\u0627\u064b \u0627\u0635\u0644\u0627\u062d\u06cc \u0627\u0632 \u0648\u06cc\u0698\u06af\u06cc \u0641\u0631\u0639\u06cc \u0633\u0627\u06cc\u0647 \u0639\u0646\u0635\u0631 \u0627\u0633\u062a. \u06a9\u062f \u0628\u0647 \u0634\u0631\u062d \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ \u5c5e\u6027\u503c<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">baseAttr<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">reactive<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">shadow<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">color<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">#fff<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">blur<\/span><span class=\"p\">:<\/span> <span class=\"mi\">0<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">offsetX<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">offsetY<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">});<\/span>\n\n\n<span class=\"c1\">\/\/ \u901a\u7528\u5c5e\u6027\u6539\u53d8<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">changeCommon<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">activeObject<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nx\">canvas<\/span><span class=\"p\">.<\/span><span class=\"nf\">getActiveObjects<\/span><span class=\"p\">()[<\/span><span class=\"mi\">0<\/span><span class=\"p\">];<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">activeObject<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">activeObject<\/span><span class=\"p\">.<\/span><span class=\"nf\">set<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">shadow<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"k\">new<\/span> <span class=\"nx\">fabric<\/span><span class=\"p\">.<\/span><span class=\"nc\">Shadow<\/span><span class=\"p\">(<\/span><span class=\"nx\">baseAttr<\/span><span class=\"p\">.<\/span><span class=\"nx\">shadow<\/span><span class=\"p\">));<\/span>\n    <span class=\"nx\">canvasEditor<\/span><span class=\"p\">.<\/span><span class=\"nx\">canvas<\/span><span class=\"p\">.<\/span><span class=\"nf\">renderAll<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"14_%D8%AF%D8%A7%D9%86%D9%84%D9%88%D8%AF_%D8%AA%D8%B5%D9%88%DB%8C%D8%B1\"><\/span>\n<p>  14. \u062f\u0627\u0646\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u067e\u0627\u0631\u0686\u0647.js \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc Png\/Jpeg\/Base64 \u0635\u0627\u062f\u0631 \u06a9\u0646\u062f. \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644\u060c \u0628\u0631\u0627\u06cc \u0641\u0631\u0645\u062a JPEG\u060c \u06a9\u06cc\u0641\u06cc\u062a \u062a\u0635\u0648\u06cc\u0631 \u0648 \u0627\u0646\u062f\u0627\u0632\u0647 \u0686\u0646\u062f\u06af\u0627\u0646\u0647 \u0646\u06cc\u0632 \u0642\u0627\u0628\u0644 \u062a\u0639\u06cc\u06cc\u0646 \u0627\u0633\u062a. \u0628\u0631\u0627\u06cc \u062c\u0632\u0626\u06cc\u0627\u062a\u060c \u0644\u0637\u0641\u0627\u064b \u0628\u0647 \u0627\u0633\u0646\u0627\u062f API \u067e\u0627\u0631\u0686\u0647.js \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0645\u0648\u0627\u0631\u062f \u0641\u0648\u0642 \u062c\u0632\u06cc\u06cc\u0627\u062a \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u0645\u0648\u0628\u0627\u06cc\u0644 \u0628\u0627 fabric.js \u0647\u0633\u062a\u0646\u062f. \u062f\u0631 \u062a\u0631\u06a9\u06cc\u0628 \u0628\u0627 \u067e\u0631\u0648\u0698\u0647 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0648 \u0645\u0639\u0645\u0627\u0631\u06cc \u067e\u0644\u0627\u06af\u06cc\u0646 \u0645\u0627\u060c \u062a\u0648\u0633\u0639\u0647 \u067e\u0631\u0648\u0698\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u062a\u06a9\u0645\u06cc\u0644 \u0634\u0648\u062f. \u0627\u06af\u0631 \u0631\u0648\u06cc \u067e\u0631\u0648\u0698\u0647 \u0645\u0634\u0627\u0628\u0647\u06cc \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u067e\u0631\u0648\u0698\u0647 \u0645\u0634\u0627\u0628\u0647\u06cc \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u062f\u060c \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f \u0628\u0627 \u0645\u0646 \u062f\u0631 \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n<p>\u067e\u0631\u0648\u0698\u0647 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632\uff1ahttps:\/\/github.com\/ikuaitu\/vue-fabric-editor\/blob\/main\/README-zh.md<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Summarize this content to 400 words in Persian Lang \u0633\u0644\u0627\u0645 \u0628\u0647 \u0647\u0645\u0647! \u0645\u0646 \u0646\u0648\u06cc\u0633\u0646\u062f\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u062f\u0631 https:\/\/github.com\/ikuaitu\/vue-fabric-editor \u0647\u0633\u062a\u0645. \u0627\u06cc\u0646 \u06cc\u06a9 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0646\u0633\u062e\u0647 \u0631\u0627\u06cc\u0627\u0646\u0647 \u0634\u062e\u0635\u06cc \u0627\u0633\u062a. \u0627\u062e\u06cc\u0631\u0627\u060c \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0627\u06cc\u0646 \u0633\u0648\u0627\u0644 \u0631\u0627 \u0645\u0637\u0631\u062d \u06a9\u0631\u062f\u0647 \u0627\u0646\u062f \u06a9\u0647 \u0622\u06cc\u0627 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u062a\u0635\u0648\u06cc\u0631 \u0645\u0646\u0628\u0639 \u0628\u0627\u0632 \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0647 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":77704,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-77703","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/77703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=77703"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/77703\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/77704"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=77703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=77703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=77703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}