|
@@ -31,6 +31,11 @@ export default defineComponent({
|
|
|
emits: ['update:value'],
|
|
|
setup(props, { emit }) {
|
|
|
const state = reactive({
|
|
|
+ answerDomId: 'answer' + +new Date(),
|
|
|
+ answerObj: {
|
|
|
+ height: 100,
|
|
|
+ width: 100
|
|
|
+ },
|
|
|
canvasDomId: 'canvas' + +new Date(),
|
|
|
sortable: null as any,
|
|
|
list: [] as any,
|
|
@@ -123,7 +128,7 @@ export default defineComponent({
|
|
|
ctx.beginPath()
|
|
|
ctx.moveTo(startPoint.x, startPoint.y)
|
|
|
ctx.lineTo(endPoint.x, endPoint.y)
|
|
|
- ctx.lineWidth = 1
|
|
|
+ ctx.lineWidth = 2
|
|
|
ctx.strokeStyle = '#FF8057'
|
|
|
ctx.stroke()
|
|
|
}
|
|
@@ -144,6 +149,16 @@ export default defineComponent({
|
|
|
// }
|
|
|
// }
|
|
|
|
|
|
+ onMounted(() => {
|
|
|
+ const answer: any = document.getElementById(state.answerDomId)
|
|
|
+ const { width, height } = useRect(answer)
|
|
|
+ console.log(width, height)
|
|
|
+ state.answerObj = {
|
|
|
+ height,
|
|
|
+ width
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
return () => (
|
|
|
<div class={styles.unitSubject}>
|
|
|
<div class={styles.unitSubjectTitle}>
|
|
@@ -156,7 +171,7 @@ export default defineComponent({
|
|
|
src="https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/dbb27307d428424c8efb9f26032cfa1a_mergeImage.png"
|
|
|
/>
|
|
|
|
|
|
- <div class={[styles.unitAnswers]}>
|
|
|
+ <div class={[styles.unitAnswers]} id={state.answerDomId}>
|
|
|
<div class={styles.leftSection}>
|
|
|
{state.options.map((item: any) => (
|
|
|
<div
|
|
@@ -181,7 +196,12 @@ export default defineComponent({
|
|
|
))}
|
|
|
</div>
|
|
|
|
|
|
- <canvas id={state.canvasDomId} class={styles.canvasSection}></canvas>
|
|
|
+ <canvas
|
|
|
+ id={state.canvasDomId}
|
|
|
+ class={styles.canvasSection}
|
|
|
+ width={state.answerObj.width}
|
|
|
+ height={state.answerObj.height}
|
|
|
+ ></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
)
|