|
@@ -151,7 +151,14 @@
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
- <div style=" position: relative;width: 512px;height:512px;margin: 0 auto;">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ position: relative;
|
|
|
+ width: 512px;
|
|
|
+ height: 512px;
|
|
|
+ margin: 0 auto;
|
|
|
+ "
|
|
|
+ >
|
|
|
<canvas
|
|
|
class="canvasBg"
|
|
|
:width="512"
|
|
@@ -159,6 +166,7 @@
|
|
|
ref="canvasBg"
|
|
|
></canvas>
|
|
|
<canvas
|
|
|
+ class="canvas"
|
|
|
:width="512"
|
|
|
:height="512"
|
|
|
@mousedown="mousedownFunc"
|
|
@@ -332,15 +340,12 @@ const mouseover = ele => {
|
|
|
|
|
|
const start = ele => {
|
|
|
if (!mouseDown) return;
|
|
|
- const w = canvas.value.width;
|
|
|
- canvas.value.width = w;
|
|
|
ctx.beginPath();
|
|
|
ctx.lineCap = 'round';
|
|
|
ctx.lineJoin = 'round';
|
|
|
ctx.shadowBlur = select.value[4] / 4 + 1;
|
|
|
ctx.shadowColor = select.value[1];
|
|
|
ctx.strokeStyle = select.value[1];
|
|
|
- console.log(select.value[3]);
|
|
|
ctx.globalAlpha = select.value[3];
|
|
|
ctx.lineWidth = select.value[2];
|
|
|
ctx.moveTo(ele.offsetX, ele.offsetY);
|
|
@@ -358,13 +363,38 @@ const start = ele => {
|
|
|
|
|
|
const mouseout = () => {
|
|
|
// 鼠标移出
|
|
|
+ if(!mouseDown) return;
|
|
|
ctx.closePath();
|
|
|
drawBg();
|
|
|
};
|
|
|
|
|
|
//将线条绘制到背景canvas上
|
|
|
const drawBg = () => {
|
|
|
- console.log(pathList, ctxBg);
|
|
|
+ if (!pathList.length) return;
|
|
|
+ const config = pathList[pathList.length - 1];
|
|
|
+ ctxBg.beginPath();
|
|
|
+ ctxBg.lineCap = config.lineCap;
|
|
|
+ ctxBg.lineJoin = config.lineJoin;
|
|
|
+ ctxBg.shadowBlur = config.shadowBlur;
|
|
|
+ ctxBg.shadowColor = config.shadowColor;
|
|
|
+ ctxBg.strokeStyle = config.strokeStyle;
|
|
|
+ ctxBg.globalAlpha = config.globalAlpha;
|
|
|
+ ctxBg.lineWidth = config.lineWidth;
|
|
|
+ ctxBg.moveTo(config.path[0].x, config.path[0].y);
|
|
|
+ for (let i = 1; i < config.path[0].length; i++) {
|
|
|
+ const v = config.path[0][i];
|
|
|
+ ctxBg.quadraticCurveTo(
|
|
|
+ config.path[0][i - 1].x,
|
|
|
+ config.path[0][i - 1].y,
|
|
|
+ v.x,
|
|
|
+ v.y
|
|
|
+ );
|
|
|
+ }
|
|
|
+ ctxBg.stroke();
|
|
|
+ console.log("---",config,ctxBg,canvasBg)
|
|
|
+ ctxBg.closePath();
|
|
|
+ const w = canvas.value.width;
|
|
|
+ canvas.value.width = w;
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
@@ -512,12 +542,11 @@ h4:first-child {
|
|
|
border: 1px solid #3584e4;
|
|
|
}
|
|
|
|
|
|
-.canvas{
|
|
|
+.canvas {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
- background: #ffffff;
|
|
|
}
|
|
|
.canvasBg {
|
|
|
position: absolute;
|