From 0ac4e192d2d2c28eb95e118eb381c04330b07953 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期三, 20 十一月 2024 11:51:46 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
src/components/paint/index.vue | 29 +++++++++++------------------
1 files changed, 11 insertions(+), 18 deletions(-)
diff --git a/src/components/paint/index.vue b/src/components/paint/index.vue
index eadb1e3..253f7b6 100644
--- a/src/components/paint/index.vue
+++ b/src/components/paint/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="paint">
- <canvas id="canvas" width="400" :height="canvasHeight"></canvas>
+ <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
<!-- 鎿嶄綔鎸夐挳 -->
<ul class="paint-btn">
<li class="paint-btn-box">
@@ -55,6 +55,7 @@
export default {
data() {
return {
+ canvasWidth: window.innerWidth > 450 ? 400 : window.innerWidth - 30,
backgroundImgUrl: "", // 鑳屾櫙
isDraw: true, // 缁樼敾銆佹閫夋ā寮�
brush: "Pencil", // 鐢荤瑪绫诲瀷
@@ -139,7 +140,6 @@
);
// 璁剧疆鑳屾櫙
this.setBackgroundImage();
- //
fabric.Object.prototype.transparentCorners = false;
this.setBrush();
},
@@ -149,10 +149,7 @@
// 鐢荤瑪鏍峰紡
this.vLinePatternBrush = new fabric.PatternBrush(this.canvas);
this.vLinePatternBrush.getPatternSrc = () => {
- let patternCanvas =
- fabric[this.container ? this.container : document].createElement(
- "canvas"
- );
+ let patternCanvas = document.createElement("canvas");
patternCanvas.width = patternCanvas.height = 10;
let ctx = patternCanvas.getContext("2d");
ctx.strokeStyle = this.lineColor;
@@ -166,10 +163,7 @@
};
this.hLinePatternBrush = new fabric.PatternBrush(this.canvas);
this.hLinePatternBrush.getPatternSrc = function () {
- let patternCanvas =
- fabric[this.container ? this.container : document].createElement(
- "canvas"
- );
+ let patternCanvas = document.createElement("canvas");
patternCanvas.width = patternCanvas.height = 10;
let ctx = patternCanvas.getContext("2d");
ctx.strokeStyle = this.lineColor;
@@ -185,10 +179,7 @@
this.squarePatternBrush.getPatternSrc = function () {
const squareWidth = 10;
const squareDistance = 2;
- const patternCanvas =
- fabric[this.container ? this.container : document].createElement(
- "canvas"
- );
+ const patternCanvas = document.createElement("canvas");
patternCanvas.width = patternCanvas.height =
squareWidth + squareDistance;
const ctx = patternCanvas.getContext("2d");
@@ -200,10 +191,7 @@
this.diamondPatternBrush.getPatternSrc = function () {
const squareWidth = 10;
const squareDistance = 5;
- const patternCanvas =
- fabric[this.container ? this.container : document].createElement(
- "canvas"
- );
+ const patternCanvas = document.createElement("canvas");
const rect = new fabric.Rect({
width: squareWidth,
height: squareWidth,
@@ -229,6 +217,7 @@
const oldData = localStorage.getItem(
this.config.activeBook.name + "-paint-" + this.page
);
+ this.oldImg = oldData;
this.backgroundImgUrl = oldData || this.imgUrl;
fabric.Image.fromURL(
this.backgroundImgUrl,
@@ -371,11 +360,15 @@
<style lang="less" scoped>
.paint {
+ position: relative;
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
+.bcImg {
+ position: absolute;
+}
#canvas {
border: 1px solid #ccc;
}
--
Gitblit v1.9.1