diff --git a/src/App.vue b/src/App.vue index 1b7983b..0d7393e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -27,6 +27,7 @@ const { marginLeftMargin, imageWidth, imageHeight, + textPropisi, } = storeToRefs(store); const typeSelector = ref('rus'); @@ -77,12 +78,16 @@ const savePng = async () => { Отступ слева, мм + + + + Тетрадь в линию (null); @@ -94,9 +96,14 @@ const render = () => { ctx.value.stroke(); } - // ctx.value.font = hMargins[1] * 3 * ONE_MM + "px propisi"; // todo хз почему тут x3 - // ctx.value.fillStyle = "#cccccc"; - // ctx.value.fillText("Привет мир", 100, (hMargins[0] + hMargins[1]) * ONE_MM); + ctx.value.font = hMargins[1] * 3 * ONE_MM + "px propisi"; // todo хз почему тут x3 + ctx.value.fillStyle = "#cccccc"; + let lines = textPropisi.value.split('\n') + i = 0; + while (i < lines.length) { + ctx.value.fillText(lines[i], (marginLeftMargin.value + 10) * ONE_MM, (hMargins[0] + hMargins[1]) * ONE_MM + (hMargins[0] + hMargins[1]) * ONE_MM * i); + i++ + } } }; diff --git a/src/store.ts b/src/store.ts index bc6ac9d..fee7661 100644 --- a/src/store.ts +++ b/src/store.ts @@ -39,6 +39,8 @@ export const useStore = defineStore("store", () => { imageWidth.value = tmp; }; + const textPropisi = ref("Текст..."); + return { imageBackgroundColor, @@ -57,5 +59,7 @@ export const useStore = defineStore("store", () => { imageHeight, setImageSize, rotateImage, + + textPropisi, }; });