better width/height resize but still bad
This commit is contained in:
parent
606538f578
commit
01e9eb7058
|
|
@ -373,8 +373,12 @@ export default {
|
|||
parsedColor = parseInt(`${colorChar1}${colorChar2}`);
|
||||
|
||||
// Work out the 01, 02
|
||||
if ( (!isNaN(colorChar1)) && (!isNaN(colorChar2)) && parseInt(colorChar2) > parseInt(colorChar1)) {
|
||||
parsedColor = parseInt(colorChar2)
|
||||
if (
|
||||
!isNaN(colorChar1) &&
|
||||
!isNaN(colorChar2) &&
|
||||
parseInt(colorChar2) > parseInt(colorChar1)
|
||||
) {
|
||||
parsedColor = parseInt(colorChar2);
|
||||
asciiStringArray.shift();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -37,4 +37,4 @@
|
|||
2,2 0,0 14,0R0,0 2,2 3,3 0,0 2,2
|
||||
2,2 0,0 14,0X0,0 2,2 1,2pushing 402,2 3,3 0,0 2,2
|
||||
2,2 0,0 2,2 0,0 2,2
|
||||
2,2
|
||||
2,2
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
12,12 8,8
|
||||
12,12 0,12good for vitiman D from sun exposure12,12 15,1510,0 12,12 15,1518,8 0,0 12,12 8,8
|
||||
12,12 15,1510,0 8,8 0,0 12,12 8,8
|
||||
12,12 0,0 12,12 0,12wonderful12,12 15,1510,0 8,8 0,0 12,12 8,8
|
||||
12,12 15,1510,0 12,12 0,12UK12,12 15,1510,0 15,15 0,0 15,15 0,0 15,15 0,0 12,12 8,8 12,12 8,8
|
||||
12,12 15,1510,0 12,12 0,12weather12,12 15,1510,0 15,15 0,0 15,15 0,0 8,8 0,0 12,12 8,8
|
||||
12,12 15,1510,0 15,15 0,0 15,15 0,0 15,15 0,0 12,12 15,1510,0 15,15 0,0 15,15 0,0 15,15 0,0 15,15 8,8 0,0 12,12 8,8
|
||||
12,12 15,1510,0 15,15 0,0 15,15 0,0 12,12 15,1510,0 15,15 0,0 15,15 0,0 15,15 0,0 15,15 0,0 8,8 12,12
|
||||
12,12 15,15110,0 15,15 0,0 15,15 0,0 15,15 0,0 12,12 15,1510,0 15,15 0,0 15,15 0,0 15,15 0,0 15,15 0,0 15,15 0,0 15,15 0,0 8,8 12,12 8,8 12,12
|
||||
12,12 15,1510,0 15,15 0,0 15,15 0,0 12,12 15,1510,0 15,15 0,0 15,15 0,0 8,8 0,0 12,12 8,8 12,12
|
||||
12,12 15,15111110,0 15,15 0,0 15,15 0,0 15,15 0,0 12,12 15,15110,0 15,15 0,0 15,15 0,0 15,15 0,0 12,12 8,8 12,12
|
||||
12,12 15,1510,0 12,12 15,1510,0 12,12 8,8 12,12
|
||||
12,12 15,15111111110,0 12,12 8,8 12,12
|
||||
12,12 0,12incog enjoys lawn bowls as a regular leisure activity12,12
|
||||
12,12
|
||||
12,12 0,0 14,14
|
||||
12,12 0,0 14,14
|
||||
12,12 0,0 14,14 0,14GNAA LAWN BOWLS CENTRE14,14
|
||||
12,12 0,0 14,14 0,14FOR RETIRED TROLLS14,14
|
||||
12,12 8,8 12,12 0,0 14,14
|
||||
12,12 8,8 12,12 0,0 14,14 12,12
|
||||
12,12 8,8 12,12 0,0 14,14 12,12
|
||||
12,12 5,5 8,8 7,7 8,8 12,12 0,0 14,14 12,12
|
||||
12,12 5,5 7,7 2,2 7,7 2,2 7,7 12,12 0,0 14,14 12,12 14,14 15,14|14,14 15,14|14,14 15,14|14,14 12,12
|
||||
12,12 5,5 7,7 12,12 0,12< jolly wee smile12,12 0,0 14,14 12,12 14,14 15,14|14,14 15,14|14,14 15,14|14,14 12,12
|
||||
12,12 5,5 7,7 1,1 7,7 1,1 7,7 12,12 0,0 14,14 12,12 15,14__|______|_____|____12,12
|
||||
15,15 5,5 7,7 1,1 7,7 15,15 0,0 14,14 15,15 14,14 15,15
|
||||
15,15 5,5 7,7 1 15,15 0,0 14,14 15,15 14,14 15,15 14,14 15,15
|
||||
15,15 5,5 7,0711115,15 0,0 14,14 15,15 14,14 15,15 14,14 15,15
|
||||
15,15 5,5 4,4 7,7 4,4 15,15
|
||||
15,15 5,5 4,4 15,15 0,15 15,15
|
||||
3,3 5,5 4,4 7,0723,3
|
||||
3,3 0,3unwashed >3,3 5,5 4,4 1,4\4,4 3,3 7,0722 3,3 9,3,3,3
|
||||
3,3 9,3,3,3 0,3fav3,3 5,5 4,4 1,4\4,4 3,3 7,7 3,3 15,1510,0 3,3 9,3.3,3 15,1510,0 3,3 9,3.3,3 15,1510,0 3,3
|
||||
3,3 0,3red3,3 5,5 4,4 1,4\4,4 3,3 7,7 3,3 15,1510,0 3,3 15,1510,0 3,3 15,1510,0 3,3
|
||||
3,3 0,3shirt3,3 5,5 4,4 1,4\4,4 3,3 15,1510,0 3,3 15,1510,0 3,3 15,1510,0 3,3
|
||||
3,3 9,3.3,3 5,5 4,4 1,4\4,4 7,07223,3 9,3.3,3
|
||||
3,3 1,1 0,0 1,1 3,3 7,7 223,3
|
||||
3,3 2,2 12,12 3,3 7,7 3,3 9,3,3,3
|
||||
3,3 2,2 12,12 3,3 7,7 1,1 3,3 0,3< incog poising to take an 3,3
|
||||
3,3 9,3.3,3 2,2 12,12 3,3 2,2 12,12 3,3 1,1 3,3 0,3absolutely smashing next3,3 9,3/3,3
|
||||
3,3 2,2 12,12 3,031 2,2 12,12 3,3 1,1 3,3 0,3bowl to defeat his previous3,3
|
||||
3,3 2,2 12,12 3,3 2,2 12,12 3,3 9,3,3,3 1,1 3,3 0,3best score3,3
|
||||
3,3 5,5 7,7 3,3 5,5 7,7 3,3 9,3,3,3
|
||||
3,3 5,5 7,7 3,3 5,5 7,7 3,3 9,3\3,3
|
||||
3,3 5,5 7,7 3,3 5,5 7,7 3,3 9,3,3,3
|
||||
3,3 5,5 7,7 3,3 5,5 7,7 3,3
|
||||
3,3 9,3.3,3 1,1 11 3,3 1,1 111 3,3 9,3.3,3
|
||||
3,3 1,1 111 3,3 1,01111 3,3
|
||||
3,3 0,3 #JEWBIRDWASRIGHT2020<3.
|
||||
|
|
@ -76,6 +76,7 @@ export default {
|
|||
this.charCodes = this.$store.state.charCodes;
|
||||
this.toolbar = this.$store.state.toolbar;
|
||||
this.toolbarState = this.$store.getters.getToolbarState;
|
||||
this.onToolbarChange('default')
|
||||
},
|
||||
name: "Toolbar",
|
||||
|
||||
|
|
|
|||
|
|
@ -7,28 +7,23 @@
|
|||
|
||||
<div id="canvas-area" style="position: relative">
|
||||
<span>{{ x }}, {{ y }}</span>
|
||||
<canvas
|
||||
ref="grid"
|
||||
id="grid"
|
||||
width="5024"
|
||||
height="5024"
|
||||
class="gridCanvas"
|
||||
></canvas>
|
||||
|
||||
<vue-draggable-resizable
|
||||
style="z-index: 5; left: 220px"
|
||||
:max-width="1000"
|
||||
:max-height="1000"
|
||||
:grid=[13,8]
|
||||
:w="canvas.width"
|
||||
:h="canvas.height"
|
||||
:draggable="currentTool === 'default'"
|
||||
@resizing="onCanvasResize"
|
||||
@dragging="onCanvasDrag"
|
||||
>
|
||||
|
||||
<canvas
|
||||
ref="canvas"
|
||||
id="canvas"
|
||||
width="1000"
|
||||
height="1000"
|
||||
:key="refreshCanvas"
|
||||
class="canvas"
|
||||
:width="canvas.width"
|
||||
:height="canvas.height"
|
||||
@mousemove="showCoordinates"
|
||||
@mousedown="cavnasMouseDown"
|
||||
@mouseup="cavnasMouseUp"
|
||||
|
|
@ -51,18 +46,6 @@ body {
|
|||
z-index: 0;
|
||||
}
|
||||
|
||||
.gridCanvas {
|
||||
position: absolute;
|
||||
border: lightgrey 1px solid;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
|
||||
z-index: -1;
|
||||
margin-left: -2502px;
|
||||
margin-top: -2493px;
|
||||
width: 5000px;
|
||||
height: 5000px;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
@ -78,9 +61,11 @@ export default {
|
|||
|
||||
if (this.currentAsciibirdMeta.blocks) {
|
||||
this.ctx = this.$refs.canvas.getContext("2d");
|
||||
this.gridCtx = this.$refs.grid.getContext("2d");
|
||||
|
||||
this.redrawCanvas();
|
||||
this.canvas.width = this.currentAsciibirdMeta.width * this.currentAsciibirdMeta.blockWidth;
|
||||
this.canvas.height = this.currentAsciibirdMeta.height * this.currentAsciibirdMeta.blockHeight;
|
||||
this.redrawCanvas();
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
|
|
@ -103,14 +88,15 @@ export default {
|
|||
y: null,
|
||||
},
|
||||
canvas: {
|
||||
width: 2048,
|
||||
height: 2048,
|
||||
width: 512,
|
||||
height: 512,
|
||||
},
|
||||
gridCtx: null,
|
||||
x: 0,
|
||||
y: 0,
|
||||
refreshCanvas: 0,
|
||||
currentTool: null,
|
||||
redraw: true,
|
||||
}),
|
||||
computed: {
|
||||
canvasStyle() {
|
||||
|
|
@ -119,9 +105,6 @@ export default {
|
|||
generateTitle() {
|
||||
return this.currentAsciibirdMeta.title ?? "";
|
||||
},
|
||||
// watchColorChange() {
|
||||
// return this.$store.getters.getColor;
|
||||
// },
|
||||
watchToolChange() {
|
||||
return this.$store.getters.getCurrentTool;
|
||||
},
|
||||
|
|
@ -132,12 +115,11 @@ export default {
|
|||
watch: {
|
||||
watchAsciiChange(val, old) {
|
||||
this.currentAsciibirdMeta = val;
|
||||
this.drawGrid();
|
||||
this.redrawCanvas();
|
||||
this.canvas.width = this.currentAsciibirdMeta.width * this.currentAsciibirdMeta.blockWidth;
|
||||
this.canvas.height = this.currentAsciibirdMeta.height * this.currentAsciibirdMeta.blockHeight;
|
||||
this.redrawCanvas();
|
||||
},
|
||||
// watchColorChange(val) {
|
||||
// console.log(JSON.stringify(val));
|
||||
// },
|
||||
watchToolChange(val) {
|
||||
this.currentTool = val;
|
||||
},
|
||||
|
|
@ -148,10 +130,7 @@ export default {
|
|||
},
|
||||
redrawCanvas() {
|
||||
// Clears the whole canvas
|
||||
this.ctx.clearRect(0, 0, 1000, 1000);
|
||||
this.ctx.stroke();
|
||||
|
||||
this.drawGrid();
|
||||
this.ctx.clearRect(0, 0, 10000, 10000);
|
||||
|
||||
if (this.currentAsciibirdMeta.blocks.length) {
|
||||
const BLOCK_WIDTH = this.currentAsciibirdMeta.blockWidth;
|
||||
|
|
@ -168,6 +147,7 @@ export default {
|
|||
|
||||
this.ctx.font = "12.5px Hack";
|
||||
|
||||
|
||||
for (y = 0; y < this.currentAsciibirdMeta.height + 1; y++) {
|
||||
canvasY = BLOCK_HEIGHT * y;
|
||||
|
||||
|
|
@ -201,7 +181,7 @@ export default {
|
|||
canvasX - 1,
|
||||
canvasY + BLOCK_HEIGHT - 3
|
||||
);
|
||||
this.ctx.stroke();
|
||||
// this.ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -210,22 +190,12 @@ export default {
|
|||
|
||||
this.ctx.stroke();
|
||||
},
|
||||
processMouseDown(e) {
|
||||
// this.canvasClass(e)
|
||||
this.selectionMode = true;
|
||||
this.startPosition.x = e.clientX;
|
||||
this.startPosition.y = e.clientY;
|
||||
},
|
||||
processMouseMove(e) {
|
||||
// if (this.selectionMode) {
|
||||
// }
|
||||
},
|
||||
processMouseUp(e) {
|
||||
this.selectionMode = false;
|
||||
this.startPosition.x = null;
|
||||
this.startPosition.y = null;
|
||||
},
|
||||
showCoordinates(e) {
|
||||
this.redrawCanvas();
|
||||
if (e.offsetX >= 0) {
|
||||
this.x = e.offsetX;
|
||||
}
|
||||
|
|
@ -237,6 +207,13 @@ export default {
|
|||
this.x = Math.floor(this.x / this.currentAsciibirdMeta.blockWidth);
|
||||
this.y = Math.floor(this.y / this.currentAsciibirdMeta.blockHeight);
|
||||
},
|
||||
onDelayRedrawCanvas() {
|
||||
|
||||
setTimeout(() => {
|
||||
console.log("delay")
|
||||
this.redraw = true
|
||||
}, 500);
|
||||
},
|
||||
cavnasMouseDown() {
|
||||
switch (this.currentTool) {
|
||||
case "mouse":
|
||||
|
|
@ -252,38 +229,25 @@ export default {
|
|||
].bg = this.$store.getters.getBgColor;
|
||||
break;
|
||||
}
|
||||
},
|
||||
cavnasMouseUp() {
|
||||
|
||||
this.redrawCanvas();
|
||||
},
|
||||
drawGrid() {
|
||||
const width = 5000;
|
||||
const height = 5000;
|
||||
onCanvasResize(left, top, width, height) {
|
||||
this.canvas.width = width
|
||||
this.canvas.height = height
|
||||
|
||||
const s = 26;
|
||||
const sW = 16;
|
||||
const pL = s;
|
||||
const pT = s;
|
||||
const pR = s;
|
||||
const pB = s;
|
||||
|
||||
if (this.gridCtx) {
|
||||
this.gridCtx.clearRect(0, 0, width, height);
|
||||
|
||||
this.gridCtx.strokeStyle = "lightgrey";
|
||||
this.gridCtx.lineWidth = 0.333;
|
||||
this.gridCtx.beginPath();
|
||||
for (let x = pL; x <= width - pR; x += sW) {
|
||||
this.gridCtx.moveTo(x, pT);
|
||||
this.gridCtx.lineTo(x, height - pB);
|
||||
}
|
||||
for (let y = pT; y <= height - pB; y += s) {
|
||||
this.gridCtx.moveTo(pL, y);
|
||||
this.gridCtx.lineTo(width - pR, y);
|
||||
}
|
||||
this.gridCtx.stroke();
|
||||
if (this.redraw) {
|
||||
this.redraw = false
|
||||
this.redrawCanvas()
|
||||
this.onDelayRedrawCanvas()
|
||||
}
|
||||
},
|
||||
onCanvasDrag(left, top) {
|
||||
// console.log(left, top)
|
||||
},
|
||||
cavnasMouseUp() {
|
||||
// this.redrawCanvas();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue