جزئیات ویرایشگر تصویر موبایل H5 را با استفاده از fabric.js توسعه دهید

Summarize this content to 400 words in Persian Lang
سلام به همه! من نویسنده ویرایشگر تصویر منبع باز در https://github.com/ikuaitu/vue-fabric-editor هستم. این یک ویرایشگر تصویر منبع باز مبتنی بر نسخه رایانه شخصی است.

اخیرا، بسیاری از توسعه دهندگان این سوال را مطرح کرده اند که آیا ویرایشگر تصویر منبع باز را می توان به ویرایشگر تصویر نسخه H5 مناسب برای پایانه های تلفن همراه تبدیل کرد. اخیراً، به محض راه‌اندازی نسخه H5 ویرایشگر تصویر، ایده‌های پیاده‌سازی و جزئیات محصول را در یادداشت‌هایی سازماندهی کردم و برای مرجع شما به اشتراک گذاشتم.

عملکردهای اصلی ویرایشگر تصویر منبع باز مانند تغییر قالب ها، افزودن عناصر، فونت های سفارشی و غیره در دسترس هستند، اما در مقایسه با تعامل در سمت تلفن همراه، تفاوت های زیادی وجود دارد و تغییرات زیادی انجام شده است. . این یادداشت عمدتا ایده و جزئیات ویرایشگر تصویر موبایل را به اشتراک می‌گذارد.

تغییر قالب ها
اضافه کردن تصاویر
عناصر ترکیبی را اضافه کنید
تنظیم رنگ پس زمینه
تغییر اندازه بوم
منوی سریع
نوار ابزار خواص.
فونت های جلوه های ویژه
تغییر فونت
متن ورودی
طرح بندی متن
مرز.
سایه.
دانلود تصاویر.

توجه: برخی از نمونه‌های کد کد بسته‌بندی شده‌اند و بومی پارچه‌ای نیستند.

1. تغییر الگو

ویرایشگر بر اساس fabric.js توسعه داده شده است و تمام قالب ها با فرمت json ذخیره می شوند. برای تغییر الگوها، فقط باید رابط جزئیات را درخواست کنید و داده ها را با فرمت json به بوم اضافه کنید. لازم است قبل از رندر به نام فونت استفاده شده در قالب توجه کنید و فایل فونت را بارگذاری کنید. در غیر این صورت سبک فونت به درستی رندر نمی شود.

const loadInfo = async (res: any) => {
const info = res.data
templName.value = info.name;
await canvasEditor.getFontList(JSON.stringify(info.json));
canvasEditor.loadJSON(JSON.stringify(info.json), () => LoadingPlugin(false));
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. اضافه کردن تصویر

راه‌های زیادی برای افزودن تصاویر در fabric.js وجود دارد که می‌توانیم از ساده‌ترین آنها استفاده کنیم fabric.Image.fromURLعلاوه بر این، اغلب تصاویر بزرگتر از بوم وجود دارد، اما همچنین نیاز به مقیاس بندی تصویر با توجه به عرض بوم وجود دارد که برای کاربران راحت تر است.

const toEditor = async (e: MouseEvent) => {
visible.value = false
LoadingPlugin(true)
const item = await canvasEditor.createImgByElement(e.target as HTMLImageElement)
await canvasEditor.addBaseType(item, { scale: true })
LoadingPlugin(false)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. عنصر ترکیبی را اضافه کنید

Fabric.js از صادرات/وارد کردن عناصر جداگانه در قالب JSON پشتیبانی می کند. اگر داده‌های صادر شده را در پایگاه داده ذخیره کنیم، می‌توانیم آن را با توجه به نوع عنصر هنگام وارد کردن وارد کنیم. باید نوع عنصر را در JSON بدست آوریم و آن را به عنوان نام متد فراخوانی کنیم. همچنین باید قبل از وارد کردن فونت بارگذاری و بعد از ریختن مقیاس بندی انجام دهیم.

const capitalizeFirstLetter = (str: string) => {
return str.charAt(0).toUpperCase() + str.slice(1);
}

const toEditor = async (item: ItemProps) => {
visible.value = false
LoadingPlugin(true)
await canvasEditor.downFontByJSON(JSON.stringify(item.json));
const el = JSON.parse(JSON.stringify(item.json));
const elType = capitalizeFirstLetter(el.type);
new fabric[elType].fromObject(el, (fabricEl: fabric.Object) => {
canvasEditor.dragAddItem(fabricEl);
LoadingPlugin(false)
});
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. رنگ پس زمینه را تنظیم کنید

تنظیم رنگ پس زمینه نسبتا ساده است. می توانید رنگ را با توجه به API پارچه ها تنظیم کنید. لازم به ذکر است که اکثر اجزای رنگی در سمت رایانه شخصی با صحنه موبایل انتهای H5 سازگار نیستند و از رویدادهای لمسی پشتیبانی نمی کنند. ما از کامپوننت “@jaames/iro” استفاده کردیم که عملکرد خوبی در انتهای تلفن همراه دارد و کاملاً با صحنه ما سازگار است. API آن بسیار انعطاف پذیر است. ما آن را در یک جزء رنگ عمومی کپسوله کردیم و آن را در چندین مکان فراخوانی کردیم.

(”);
let colorPicker: any = null;

onMounted(() => {
// 创建iro.js颜色选择器
colorPicker = iro.ColorPicker(pickerContainer.value, {
width: props.width,
color: props.modelValue,
borderWidth: 1,
borderColor: “#fff”,
layoutDirection: ‘horizontal’,
layout: [
{
component: iro.ui.Slider,
options: {
id: ‘hue-slider’,
sliderType: ‘hue’
}
},
{
component: iro.ui.Box,
},
{
component: iro.ui.Slider,
options: {
sliderType: ‘alpha’
}
}
] });

// 监听颜色变化事件并发射自定义事件
colorPicker.on(‘color:change’, (color: any) => {
const rgbaString = color.rgbaString;
emit(‘update:modelValue’, rgbaString);
emit(‘change’, rgbaString);
});
});

]]>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. اندازه بوم را تغییر دهید

const resizeEditor = async () => {
await nextTick()
const editorWorkspase = document.querySelector(‘#workspace’) as HTMLElement
const popElement = document.querySelector(‘.my-editor-popup’) as HTMLElement
const headerElement = document.querySelector(‘.t-navbar’) as HTMLElement
if (popElement) {
editorWorkspase.style.height = `calc(100vh – ${popElement?.offsetHeight + headerElement?.offsetHeight || 0}px)`
} else {
editorWorkspase.style.height = ”
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. منوی میانبر

بسیاری از عملیات میانبر باید بتوانند به کاربران اجازه دهند تا به سرعت عملیات را پیدا و تکمیل کنند. ما یک تابع منوی میانبر به عنصر اضافه کرده‌ایم تا به کاربران اجازه داده نشود روی نوار منوی پایین کلیک کنند. هنگامی که عنصر انتخاب می شود، به طور خودکار نمایش داده می شود و با برداشتن علامت پنهان می شود. لازم به ذکر است که منوی میانبر همیشه بالای عنصر نیست. منوی میانبر باید بر اساس موقعیت عنصر و اندازه بوم قرار گیرد. زمانی که منو از ناحیه بوم فراتر رفت، باید موقعیت منو را به موقع تنظیم کنیم. علاوه بر این، هنگامی که کادر پاپ آپ ویژگی ظاهر می شود و اندازه بوم تغییر می کند، موقعیت منو باید به طور همزمان اصلاح شود.

// 更新位置信息
const upDatePosition = async () => {
const activeObject = canvasEditor.canvas.getActiveObject();
if (activeObject) {
canvasEditor.canvas.renderAll();
fixLeft.value = 10;
fixTop.value = 10;
await nextTick();
isIncluded(activeObject);
await nextTick();
}
}

// 监听选中对象变化更新位置信息
getObjectAttr(upDatePosition)
canvasEditor.canvas.on(‘selection:updated’, upDatePosition)
canvasEditor.canvas.on(‘mouse:move’, upDatePosition)
canvasEditor.on(‘workspaceAutoEvent’, upDatePosition)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

7. نوار ابزار خواص

با مراجعه به سایر ویرایشگرهای تصویر، برخی از ویژگی ها تنها پس از کلیک روی یک عنصر گزینه های قابل تغییر خواهند داشت. در صورت لغو انتخاب، گزینه ها پنهان می شوند. علاوه بر این، عناصر انتخابی مختلف گزینه های قابل تغییر متفاوتی خواهند داشت. این یک تعامل بسیار عالی در ساخت یک ویرایشگر تصویر پیچیده در پایانه های تلفن همراه است.

ما انواع و روش‌های انتخاب رایج را کپسوله کرده‌ایم و پنهان کردن/نمایش را به‌طور جداگانه برای هر جزء ویژگی تنظیم کرده‌ایم.

8. فونت جلوه های ویژه

فونت های جلوه های ویژه عمدتاً ترکیبی از رنگ، حاشیه و سایه عناصر متن هستند. ما JSON را پس از تنظیم سبک متن صادر می کنیم و آن را در پایگاه داده ذخیره می کنیم. هنگامی که یک جلوه ویژه خاص انتخاب می شود، ویژگی ها را می توان با توجه به داده های موجود در JSON روی عنصر تنظیم کرد.

const setStyle = (item: ImgItem) => {
const activeObject = canvasEditor.canvas.getActiveObjects()[0];
if (activeObject) {
const values = toRaw(item.json);
const keys = [‘fill’, ‘stroke’, ‘strokeWidth’, ‘shadow’, ‘strokeLineCap’];
activeObject.set(‘paintFirst’, ‘stroke’);
keys.forEach((key) => {
activeObject.set(key, values[key]);
if (key === ‘fill’ && typeof values[key] != ‘string’) {
activeObject.set(key, new fabric.Gradient(values[key]));
}
});
canvasEditor.canvas.renderAll();
}
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

9. فونت را تغییر دهید

برای تغییر فونت، فقط باید ویژگی «fontFamily» عنصر structure.js را فراخوانی کنید. قبل از تغییر فونت، مطمئن شوید که فونت بارگذاری شده است.

const changeCommon = async (key: string, value: any) => {
const activeObject = canvasEditor.canvas.getActiveObjects()[0];
if (activeObject) {
LoadingPlugin(true);
baseAttr.fontFamily = value;
try {
await canvasEditor.loadFont(value)
} catch (error) {
console.log(error)
}
LoadingPlugin(false);
activeObject && activeObject.set(key, value);
canvasEditor.canvas.renderAll();
}
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

10. متن را وارد کنید

Fabric.js را می توان با دوبار کلیک کردن مستقیم روی عنصر متن تغییر داد، اما این تعامل در انتهای تلفن همراه قابل توجه نیست. ما عنصر متن را به طور جداگانه تغییر داده ایم. پس از انتخاب عنصر، با کلیک مجدد کادر متنی ظاهر می شود. می توانید روی دکمه در نوار منوی پایین کلیک کنید تا آن را تغییر دهید.

11. طرح بندی متن

حروفچینی متن نسبتاً ساده است. ما فقط باید ویژگی های متن را با توجه به ویژگی های متن پارچه ها مانند fontSize، lineHeight، charSpacing و غیره تنظیم کنیم.

// 属性值
const baseAttr = reactive({

fontSize: 0,
lineHeight: 0,
charSpacing: 0,
textAlign: ”,

fontWeight: ”,
fontStyle: ”,

underline: false,
linethrough: false,
overline: false,
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

12. مرز

سبک حاشیه شبیه به سبک متن است و می توان آن را به سرعت با مولفه رنگ پیاده سازی کرد.

// 属性值
const baseAttr = reactive({
stroke: ‘#fff’,
strokeWidth: 0,
strokeDashArray: [],
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

13. سایه

ویژگی مرجع عمدتاً اصلاحی از ویژگی فرعی سایه عنصر است. کد به شرح زیر است:

// 属性值
const baseAttr = reactive({
shadow: {
color: ‘#fff’,
blur: 0,
offsetX: 1,
offsetY: 1,
}
});

// 通用属性改变
const changeCommon = () => {
const activeObject = canvasEditor.canvas.getActiveObjects()[0];
if (activeObject) {
activeObject.set(‘shadow’, new fabric.Shadow(baseAttr.shadow));
canvasEditor.canvas.renderAll();
}
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

14. دانلود تصویر

پارچه.js می‌تواند تصاویر را در قالب‌های Png/Jpeg/Base64 صادر کند. در عین حال، برای فرمت JPEG، کیفیت تصویر و اندازه چندگانه نیز قابل تعیین است. برای جزئیات، لطفاً به اسناد API پارچه.js مراجعه کنید.

موارد فوق جزییات پیاده سازی توسعه ویرایشگر موبایل با fabric.js هستند. در ترکیب با پروژه منبع باز و معماری پلاگین ما، توسعه پروژه می تواند به راحتی تکمیل شود. اگر روی پروژه مشابهی کار می کنید یا پروژه مشابهی را انجام می دهید، خوش آمدید با من در ارتباط باشید.

پروژه منبع باز：https://github.com/ikuaitu/vue-fabric-editor/blob/main/README-zh.md

const loadInfo = async (res: any) => {
  const info = res.data
  templName.value = info.name;
  await canvasEditor.getFontList(JSON.stringify(info.json));
  canvasEditor.loadJSON(JSON.stringify(info.json), () => LoadingPlugin(false));
};

const toEditor = async (e: MouseEvent) => {
  visible.value = false
  LoadingPlugin(true)
  const item = await canvasEditor.createImgByElement(e.target as HTMLImageElement)
  await canvasEditor.addBaseType(item, { scale: true })
  LoadingPlugin(false)
}

const capitalizeFirstLetter = (str: string) => {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

const toEditor = async (item: ItemProps) => {
  visible.value = false
  LoadingPlugin(true)
  await canvasEditor.downFontByJSON(JSON.stringify(item.json));
  const el = JSON.parse(JSON.stringify(item.json));
  const elType = capitalizeFirstLetter(el.type);
  new fabric[elType].fromObject(el, (fabricEl: fabric.Object) => {
    canvasEditor.dragAddItem(fabricEl);
    LoadingPlugin(false)
  });
}

const resizeEditor = async () => {
    await nextTick()
    const editorWorkspase = document.querySelector('#workspace') as HTMLElement
    const popElement = document.querySelector('.my-editor-popup') as HTMLElement
    const headerElement = document.querySelector('.t-navbar') as HTMLElement
    if (popElement) {
      editorWorkspase.style.height = `calc(100vh - ${popElement?.offsetHeight + headerElement?.offsetHeight || 0}px)`
    } else {
      editorWorkspase.style.height = ''
    }
  }

// 更新位置信息
const upDatePosition = async () => {
  const activeObject = canvasEditor.canvas.getActiveObject();
  if (activeObject) {
    canvasEditor.canvas.renderAll();
    fixLeft.value = 10;
    fixTop.value = 10;
    await nextTick();
    isIncluded(activeObject);
    await nextTick();
  }
}

// 监听选中对象变化更新位置信息
getObjectAttr(upDatePosition)
canvasEditor.canvas.on('selection:updated', upDatePosition)
canvasEditor.canvas.on('mouse:move', upDatePosition)
canvasEditor.on('workspaceAutoEvent', upDatePosition)

const setStyle = (item: ImgItem) => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  if (activeObject) {
    const values = toRaw(item.json);
    const keys = ['fill', 'stroke', 'strokeWidth', 'shadow', 'strokeLineCap'];
    activeObject.set('paintFirst', 'stroke');
    keys.forEach((key) => {
      activeObject.set(key, values[key]);
      if (key === 'fill' && typeof values[key] != 'string') {
        activeObject.set(key, new fabric.Gradient(values[key]));
      }
    });
    canvasEditor.canvas.renderAll();
  }
};

const changeCommon = async (key: string, value: any) => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  if (activeObject) {
    LoadingPlugin(true);
    baseAttr.fontFamily = value;
    try {
      await canvasEditor.loadFont(value)
    } catch (error) {
      console.log(error)
    }
    LoadingPlugin(false);
    activeObject && activeObject.set(key, value);
    canvasEditor.canvas.renderAll();
  }
};

// 属性值
const baseAttr = reactive({

  fontSize: 0,
  lineHeight: 0,
  charSpacing: 0,
  textAlign: '',

  fontWeight: '',
  fontStyle: '',

  underline: false,
  linethrough: false,
  overline: false,
});

// 属性值
const baseAttr = reactive({
  stroke: '#fff',
  strokeWidth: 0,
  strokeDashArray: [],
});

// 属性值
const baseAttr = reactive({
  shadow: {
    color: '#fff',
    blur: 0,
    offsetX: 1,
    offsetY: 1,
  }
});


// 通用属性改变
const changeCommon = () => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0];
  if (activeObject) {
    activeObject.set('shadow', new fabric.Shadow(baseAttr.shadow));
    canvasEditor.canvas.renderAll();
  }
};