This commit is contained in:
aihe 2024-07-24 00:07:10 +08:00
parent 1c9021d5b8
commit 4a4b670c5c
3 changed files with 20 additions and 57 deletions

View File

@ -1,6 +1,6 @@
<template>
<view class="canvas-con">
<canvas :canvas-id="canvasId" :style="{width:canvasWidth + 'px', height: canvasHeight + 'px'}"></canvas>
<view class="canvas-con" :style="convContSty">
<canvas :canvas-id="canvasId" :style="canvSty"></canvas>
</view>
</template>
@ -14,7 +14,20 @@ export default {
},
computed: {
canvSty(){
let sty = `width:${this.canvasWidth}px;height:${this.canvasHeight}px;`
return sty
},
convContSty(){
// 缩放canvas的父级,绘图可以一屏宽度显示出来
let bodyRpxWidth = 750
var convRpxWidth = this.canvasWidth/(uni.upx2px(100)/100);
let convRpxHeight = this.canvasHeight/(uni.upx2px(100)/100)
let scale = bodyRpxWidth * 0.92 / convRpxWidth
let sty = `transform-origin: 0 0;transform: scale(${scale});height:${convRpxHeight * scale}rpx;`
sty += `margin-left:${bodyRpxWidth * 0.08 / 2}rpx;`
return sty
}
},
data () {
return {
@ -87,11 +100,10 @@ export default {
<style scoped lang="scss">
.canvas-con{
width: 100%;
margin-bottom: 20rpx;
}
/*图片隐藏到窗口外*/
canvas {
position: absolute;
z-index: -999;
top: -999px;
}
</style>

View File

@ -10,13 +10,8 @@
<tpx-layout>
<template v-slot:header></template>
<template v-slot:body>
<view v-for="(imgUrl, index) in imageUrl" class="mb-20">
<!-- canvas绘图后再显示预览图 -->
<view v-if="allImgRes.length > 0">
<u-row justify="center" @click="handlePreview(index)">
<image :src="imgUrl" mode="widthFix" style="max-width: 100%;"></image>
</u-row>
</view>
<view v-for="(url, index) in canvImages" @click="handlePreview(index)">
<create-image-data-bycanvas :ref="`curCanvas${index}`"></create-image-data-bycanvas>
</view>
</template>
<template v-slot:footer>
@ -43,10 +38,6 @@
</view>
</tpx-dialog>
<view v-for="(url, index) in canvImages">
<create-image-data-bycanvas :ref="`curCanvas${index}`"></create-image-data-bycanvas>
</view>
</template>
<script>

View File

@ -243,47 +243,7 @@
},
methods: {
async initEvent(ownerInstance) {
// 通过事件委托给按钮添加事件
// 添加事件前先清除事件避免重复绑定
// $(document).off("touchend")
// 新增
// $(document).on('touchend', '.add', function() {
// const wbsId = this.getAttribute('wbsId');
// const taskId = this.getAttribute('taskId');
// const taskName = this.getAttribute('taskName');
// // 调用 service 层的方法
// ownerInstance.callMethod('toAdd', {
// wbsId: wbsId,
// taskId: taskId,
// taskName: taskName
// })
// });
// Create a new PDFDocument
const pdfDoc = await PDFDocument.create()
// Embed the Times Roman font
const timesRomanFont = await pdfDoc.embedFont(StandardFonts.TimesRoman)
// Add a page and draw some text on it
const page = pdfDoc.addPage([500, 600])
page.setFont(timesRomanFont)
page.drawText('The Life of an Egg', { x: 60, y: 500, size: 50 })
page.drawText('An Epic Tale of Woe', { x: 125, y: 460, size: 25 })
// Set all available metadata fields on the PDFDocument. Note that these fields
// are visible in the "Document Properties" section of most PDF readers.
pdfDoc.setTitle('🥚 The Life of an Egg 🍳')
pdfDoc.setAuthor('Humpty Dumpty')
pdfDoc.setSubject('📘 An Epic Tale of Woe 📖')
pdfDoc.setKeywords(['eggs', 'wall', 'fall', 'king', 'horses', 'men'])
pdfDoc.setProducer('PDF App 9000 🤖')
pdfDoc.setCreator('pdf-lib (https://github.com/Hopding/pdf-lib)')
pdfDoc.setCreationDate(new Date('2018-06-24T01:58:37.228Z'))
pdfDoc.setModificationDate(new Date('2019-12-21T07:00:11.000Z'))
// Serialize the PDFDocument to bytes (a Uint8Array)
const pdfBytes = await pdfDoc.save()
console.log("=========pdfBytes============", pdfBytes)
},
}
}