|
@@ -52,6 +52,7 @@ export default defineComponent({
|
|
|
const state = reactive({
|
|
|
answerDomId: 'answer' + +new Date(),
|
|
|
answerRect: {} as any,
|
|
|
+ dpr: 1,
|
|
|
sortable: null as any,
|
|
|
list: [] as any,
|
|
|
options: [] as any,
|
|
@@ -268,7 +269,14 @@ export default defineComponent({
|
|
|
const renderDrawLine = (canvasRef: any) => {
|
|
|
// 重新画线
|
|
|
if (canvasRef.getContext) {
|
|
|
+ // console.log(canvasRef.offsetWidth, canvasRef.offsetHeight)
|
|
|
+
|
|
|
+ // 直接用 scale 放大整个坐标系,相对来说就是放大了每个绘制操作
|
|
|
const ctx = canvasRef.getContext('2d')
|
|
|
+ // ctx.scale(dpr, dpr)
|
|
|
+ // ctx.scale(dpr, dpr)
|
|
|
+ // canvasRef.width = canvasRef.offsetWidth
|
|
|
+ // canvasRef.height = canvasRef.offsetHeight
|
|
|
ctx.clearRect(0, 0, state.answerRect.width, state.answerRect.height)
|
|
|
state.drawLineList.forEach((item: any) => {
|
|
|
drawLine(ctx, item.startPoint, item.endPoint)
|
|
@@ -285,10 +293,11 @@ export default defineComponent({
|
|
|
*/
|
|
|
const drawLine = (ctx: any, startPoint: any, endPoint: any) => {
|
|
|
ctx.beginPath()
|
|
|
- ctx.moveTo(startPoint.x, startPoint.y)
|
|
|
- ctx.lineTo(endPoint.x, endPoint.y)
|
|
|
- ctx.lineWidth = 2
|
|
|
+ ctx.moveTo(Math.floor(startPoint.x) * state.dpr, Math.floor(startPoint.y) * state.dpr)
|
|
|
+ ctx.lineTo(Math.floor(endPoint.x) * state.dpr, Math.floor(endPoint.y) * state.dpr)
|
|
|
+ ctx.lineWidth = 2 * state.dpr
|
|
|
ctx.strokeStyle = '#FF8057'
|
|
|
+
|
|
|
ctx.stroke()
|
|
|
}
|
|
|
|
|
@@ -386,6 +395,9 @@ export default defineComponent({
|
|
|
const answer: any = document.getElementById(state.answerDomId)
|
|
|
const answerRect = useRect(answer)
|
|
|
state.answerRect = answerRect
|
|
|
+
|
|
|
+ const dpr = window.devicePixelRatio
|
|
|
+ state.dpr = dpr
|
|
|
})
|
|
|
})
|
|
|
|
|
@@ -410,8 +422,12 @@ export default defineComponent({
|
|
|
<canvas
|
|
|
ref={canvasRef}
|
|
|
class={styles.canvasSection}
|
|
|
- width={state.answerRect.width || 0}
|
|
|
- height={state.answerRect.height || 0}
|
|
|
+ width={state.answerRect.width * state.dpr || 0}
|
|
|
+ height={state.answerRect.height * state.dpr || 0}
|
|
|
+ style={{
|
|
|
+ width: (state.answerRect.width || 0) + 'px',
|
|
|
+ height: (state.answerRect.height || 0) + 'px'
|
|
|
+ }}
|
|
|
></canvas>
|
|
|
{state.options.map((item: any) => (
|
|
|
<div class={styles.answerItem}>
|