This commit is contained in:
zdg 2024-07-26 19:20:20 +08:00
commit 4d17465c24
2 changed files with 28 additions and 33 deletions

View File

@ -50,7 +50,10 @@ const renderPage = async (canvasobj) => {
const pdf = await pdfjsLib.getDocument(props.pdfObj.pdfUrl).promise
//
const page = await pdf.getPage(canvasobj.page)
const viewport = page.getViewport({ scale: 1.28 })
var screenWidth = window.innerWidth/2-100;
var screenHeight = window.innerHeight;
const viewport = page.getViewport({ scale:2})
const canvasElement = canvasobj.canvas
canvasElement.width = viewport.width
canvasElement.height = viewport.height
@ -66,34 +69,20 @@ const renderPage = async (canvasobj) => {
img.onload = () => {
//
// pdf fabric
// var screenWidth = window.innerWidth/2-10;
// var screenHeight = window.innerHeight;
// //
// var imgWidth = img.width;
// var imgHeight = img.height;
// //
// var widthRatio = screenWidth / imgWidth;
// var heightRatio = screenHeight / imgHeight;
// //
// var scaleRatio = Math.min(widthRatio, heightRatio);
// //
// var targetWidth = imgWidth * scaleRatio;
// var targetHeight = imgHeight * scaleRatio;
if (props.pdfObj.numberOfPdf == 2) {
if (canvasobj.index == 0) {
fabriccanvas.value.setWidth(img.width)
fabriccanvas.value.setHeight(img.height)
fabriccanvas.value.setWidth(screenWidth)
fabriccanvas.value.setHeight(screenHeight)
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
} else {
fabriccanvas1.value.setWidth(img.width)
fabriccanvas1.value.setHeight(img.height)
fabriccanvas1.value.setWidth(screenWidth)
fabriccanvas1.value.setHeight(screenHeight)
displayData(fabriccanvas1, canvsStore, canvasobj, fabric, img)
}
} else {
fabriccanvas.value.setWidth(img.width)
fabriccanvas.value.setHeight(img.height)
fabriccanvas.value.setWidth(screenWidth)
fabriccanvas.value.setHeight(screenHeight)
displayData(fabriccanvas, canvsStore, canvasobj, fabric, img)
}
// console.log(imgarr.value)
@ -120,7 +109,7 @@ const loadPdf = async (canvasobj) => {
const initPdf = async (type = 'default') => {
//
savecanvsStore(imgarr, canvsStore)
savecanvsStore(imgarr, canvsStore)
// initcanvasdata(fabriccanvas)
// initcanvasdata(fabriccanvas1)
//
@ -172,8 +161,10 @@ const initPdfone = async () => {
setTimeout(() => {
fabriccanvas1.value = new fabric.Canvas('pdf-fabric1')
fabriccanvas1.value.isDrawingMode = true
fabriccanvas1.value.freeDrawingBrush.color = 'red'
fabriccanvas1.value.freeDrawingBrush.color = '#A33AFE'
fabriccanvas1.value.freeDrawingCursor = 'default'
fabriccanvas1.value.setWidth(595)
handleevent(fabriccanvas1.value, imgarr, 'two')
}, 0)
initPdf('addOnePage')
}

View File

@ -14,23 +14,24 @@ export function handleevent(canvas, imgarr, type = 'defalut') {
if (imgarr.value[0].index == 0) {
imgarr.value[0].JSONdata = canvas.toJSON()
}
if (imgarr.value[1].index == 0) {
if (imgarr.value[1]?.index == 0) {
imgarr.value[1].JSONdata = canvas.toJSON()
}
} else {
if (imgarr.value[0].index == 1) {
imgarr.value[0].JSONdata = canvas.toJSON()
}
if (imgarr.value[1].index == 1) {
if (imgarr.value[1]?.index == 1) {
imgarr.value[1].JSONdata = canvas.toJSON()
}
}
console.log(imgarr.value)
})
}
// 保存数据
export function savecanvsStore(imgarr, canvsStore) {
canvsStore.pageArr = mergeAndReplace(canvsStore.pageArr, imgarr.value)
// console.log(canvsStore.pageArr,22222222222222222222+'存入')
}
// 重显数据
export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
@ -50,19 +51,21 @@ export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
canvsStore.pageArr.forEach((item) => {
//初始化
if (item.page == canvasobj.page) {
canvas.value.clear() // 清除 Canvas
// canvas.value.clear() // 清除 Canvas
// console.log(item.JSONdata, '找到一样的数据')
canvas.value.loadFromJSON(item.JSONdata, () => {
// 在所有对象加载完成后重新渲染画布
requestAnimationFrame(() => {
// 渲染所有对象
canvas.value.renderAll.bind(canvas.value)
canvas.value.renderAll()
})
canvas.value.renderAll.bind(canvas.value)
canvas.value.renderAll()
// requestAnimationFrame(() => {
// // 渲染所有对象
// })
})
} else {
// 使用 requestAnimationFrame 来更新画布,确保在下一帧进行重绘
canvas.value.clear() // 清除 Canvas
// // 清除 Canvas
canvas.value.clear()
requestAnimationFrame(function () {
fabric.Image.fromURL(img.src, (img) => {
img.set({
@ -75,6 +78,7 @@ export function displayData(canvas, canvsStore, canvasobj, fabric, img) {
})
// 渲染所有对象
canvas.value.renderAll.bind(canvas.value)
canvas.value.renderAll()
})
}
})