better canvas, fixes
这个提交包含在：
父节点
2ef7a5f45d
当前提交
f28dbd6b63
26
README.md
26
README.md
|
|
@ -2,33 +2,32 @@
|
|||
|
||||
ASCIIBIRD DEVELOPMENT - BORING VUEJS DEV STUFF FOR ASCII CREATION
|
||||
|
||||
# TODAY
|
||||
# FOCUS
|
||||
|
||||
DRAWING blocks bro.
|
||||
* Have multiple canvas elements, they can different z-index for the layers.
|
||||
|
||||
* Fix up the store, put in code and more shit in there
|
||||
* Store colours, tools and any other shit in here
|
||||
|
||||
## HOW TO DRAW BLOCKS
|
||||
|
||||
* What we are doing now, the slowest worst way that uses > 4gb of ram for a blank 80x80 ascii lol
|
||||
* **Plain vanilla Canvas**
|
||||
* Webgl rendering direct to canvas, three.js webgl
|
||||
* Render as SVG
|
||||
|
||||
* Canvas
|
||||
|
||||
* Webgl renderding direct to canvas, three.js webgl
|
||||
|
||||
# Doneish
|
||||
|
||||
* Initial data structure which will hold our ASCII informations.
|
||||
* Added vue-tailwind.com
|
||||
|
||||
# Things To Do
|
||||
# Things To Do Later
|
||||
|
||||
* Properly get CSS into the JS stuff ya lazy bird
|
||||
|
||||
# Roadmap
|
||||
|
||||
* Integrate front end library - DONE
|
||||
* Tie the ascii Meta Data into tabs / interface
|
||||
* Tie the ascii Meta Data into tabs / interface - DONE
|
||||
|
||||
* Take a quick look at ASCIIBLASTER, compare code
|
||||
* Render the individual blocks
|
||||
|
||||
* To import ASCIIs we are going to have to write an ASCII/ANSI -> JSON
|
||||
* Then we can reverse it JSON -> ANSI to export
|
||||
* Technically we could have our own file format and share the ASCII data in JSON, but also extra information in the JSON.
|
||||
|
|
@ -78,6 +77,7 @@ If we can import an ASCII -> two dimensional array -> Export
|
|||
* https://acid.vegas/asciimaker
|
||||
* https://stackoverflow.com/questions/60263401/draw-on-canvas-with-vue
|
||||
* https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
|
||||
* https://codereview.stackexchange.com/questions/114702/drawing-a-grid-on-canvas
|
||||
|
||||
## Project setup
|
||||
```
|
||||
|
|
|
|||
|
|
@ -26,14 +26,19 @@
|
|||
|
||||
</t-modal>
|
||||
|
||||
<h1 class="m-4 p-2">ASCIIBIRD</h1>
|
||||
<t-button @click="createClick()" class="ml-2">Add new ASCII</t-button>
|
||||
|
||||
<t-button v-for="(value, key) in asciibirdMeta" v-bind:key="key" class="ml-2" @click="changeTab(key, value)">
|
||||
{{ value.title }} ({{ value.width }} / {{ value.height }})
|
||||
</t-button>
|
||||
<div>
|
||||
<t-button @click="createClick()" class="ml-1">Add new ASCII</t-button>
|
||||
|
||||
<router-view/>
|
||||
<t-button v-for="(value, key) in asciibirdMeta" v-bind:key="key" class="ml-1" @click="changeTab(key, value)">
|
||||
{{ value.title }} ({{ value.width }} / {{ value.height }})
|
||||
</t-button>
|
||||
|
||||
<div class="border-gray-600">
|
||||
<router-view/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -59,6 +64,15 @@ export default {
|
|||
text: 'ASCII',
|
||||
currentTab: 1,
|
||||
asciibirdMeta: [],
|
||||
mircColors: [
|
||||
'rgb(255,255,255)', 'rgb(0,0,0)', 'rgb(0,0,127)', 'rgb(0,147,0)', 'rgb(255,0,0)',
|
||||
'rgb(127,0,0)', 'rgb(156,0,156)', 'rgb(252,127,0)', 'rgb(255,255,0)', 'rgb(0,252,0)',
|
||||
'rgb(0,147,147)', 'rgb(0,255,255)', 'rgb(0,0,252)', 'rgb(255,0,255)',
|
||||
'rgb(127,127,127)', 'rgb(210,210,210)'
|
||||
],
|
||||
charCodes: [
|
||||
'*','-','=','+','^','#'
|
||||
]
|
||||
|
||||
}),
|
||||
// computed: {
|
||||
|
|
@ -81,6 +95,7 @@ export default {
|
|||
this.$store.commit('changeTab', key);
|
||||
},
|
||||
createNewASCII() {
|
||||
|
||||
const payload = {
|
||||
title: this.forms.createAscii.title,
|
||||
key: this.asciibirdMeta.length,
|
||||
|
|
@ -97,9 +112,9 @@ export default {
|
|||
payload.blocks[i].push({
|
||||
x: j,
|
||||
y: i,
|
||||
bg: '#000000',
|
||||
fg: '#FFFFFF',
|
||||
char: '*',
|
||||
bg: this.mircColors[Math.floor(Math.random() * this.mircColors.length)],
|
||||
fg: this.mircColors[Math.floor(Math.random() * this.mircColors.length)],
|
||||
char: this.charCodes[Math.floor(Math.random() * this.charCodes.length)],
|
||||
bold: false,
|
||||
blinking: false,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -22,15 +22,7 @@ export default new Vuex.Store({
|
|||
blinking: false,
|
||||
},
|
||||
// asciibirdMeta holds all of the ASCII information for all the tabs
|
||||
asciibirdMeta: [{
|
||||
title: 'New ASCII',
|
||||
key: 0,
|
||||
width: 5,
|
||||
height: 5,
|
||||
blockWidth: 8,
|
||||
blockHeight: 13,
|
||||
blocks: {},
|
||||
}],
|
||||
asciibirdMeta: [],
|
||||
},
|
||||
mutations: {
|
||||
changeTab(state, payload) {
|
||||
|
|
|
|||
|
|
@ -4,19 +4,26 @@
|
|||
{{ currentAsciibirdMeta.title }} ({{ currentAsciibirdMeta.width }} /
|
||||
{{ currentAsciibirdMeta.height }})
|
||||
</h1>
|
||||
<pre><small>{{ JSON.stringify(currentAsciibirdMeta) }}</small></pre>
|
||||
<!-- <pre><small>{{ JSON.stringify(currentAsciibirdMeta) }}</small></pre> -->
|
||||
|
||||
<!-- @mousedown="processMouseDown"
|
||||
@mousemove="processMouseMove"
|
||||
@mouseup="processMouseUp" -->
|
||||
|
||||
<div>
|
||||
<canvas
|
||||
:ref="generateCanvasId"
|
||||
:id="generateCanvasId"
|
||||
@mousedown="processMouseDown"
|
||||
@mousemove="processMouseMove"
|
||||
@mouseup="processMouseUp"
|
||||
:width=canvas.width
|
||||
:height=canvas.height
|
||||
v-bind:class="dataFieldClass"
|
||||
class="border-gray-500"
|
||||
style="border-width: 2px;"
|
||||
></canvas>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <span v-for="(yValue, y) in currentAsciibirdMeta.blocks" :key="y">
|
||||
<span v-for="(xValue, x) in currentAsciibirdMeta.blocks" :key="x">
|
||||
|
||||
|
|
@ -68,6 +75,10 @@ export default {
|
|||
x: null,
|
||||
y: null,
|
||||
},
|
||||
canvas: {
|
||||
width: 2048 ,
|
||||
height: 2048
|
||||
},
|
||||
}),
|
||||
computed: {
|
||||
getFullPath() {
|
||||
|
|
@ -80,7 +91,7 @@ export default {
|
|||
watch: {
|
||||
getFullPath() {
|
||||
// console.log(this);
|
||||
this.getData();
|
||||
this.onChangeTab();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -88,8 +99,9 @@ export default {
|
|||
this.ctx = event.currentTarget.id;
|
||||
console.log(this.ctx);
|
||||
},
|
||||
getData() {
|
||||
// Call my lovely API
|
||||
onChangeTab() {
|
||||
|
||||
// Get the asciimeta index from the route URL
|
||||
this.currentAsciibirdMeta = this.$store.state.asciibirdMeta[
|
||||
this.$route.params.ascii.split('/').join('')
|
||||
];
|
||||
|
|
@ -97,20 +109,70 @@ export default {
|
|||
// I dono some routs bs or some bs needs -1 to make it all work
|
||||
let currentRefCanvas =`canvas${this.currentAsciibirdMeta.key-1}`;
|
||||
|
||||
// this.canvas.width = this.currentAsciibirdMeta.blocks.length * this.currentAsciibirdMeta.blockWidth
|
||||
// this.canvas.height = this.currentAsciibirdMeta.blocks.length * this.currentAsciibirdMeta.blockHeight
|
||||
|
||||
console.log({ generateCanvasId: this.generateCanvasId, all_refs: this.$refs, current_canvas_ref: this.$refs[currentRefCanvas] })
|
||||
|
||||
if (this.$refs[currentRefCanvas]) {
|
||||
console.log('got', this.$refs[currentRefCanvas]);
|
||||
this.ctx = this.$refs[currentRefCanvas].getContext("2d")
|
||||
console.log('current ctx', this.ctx)
|
||||
|
||||
this.redrawCanvas()
|
||||
} else {
|
||||
console.log("Warning: could not find asciibird meta key " + currentRefCanvas)
|
||||
}
|
||||
},
|
||||
|
||||
redrawCanvas() {
|
||||
console.log("Canvas redraw")
|
||||
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
||||
|
||||
if (this.currentAsciibirdMeta.blocks.length) {
|
||||
|
||||
let blockWidth = this.currentAsciibirdMeta.blockWidth
|
||||
let blockHeight = this.currentAsciibirdMeta.blockHeight
|
||||
|
||||
let h = 0;
|
||||
let w = 0;
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
let blockX = 0;
|
||||
let blockY = 0;
|
||||
let curBlock = undefined;
|
||||
|
||||
this.ctx.font = "8px Mono";
|
||||
|
||||
for(y = 0; y < this.currentAsciibirdMeta.blocks.length; y++) {
|
||||
blockY = y * blockHeight
|
||||
w = blockWidth
|
||||
|
||||
for(x = 0; x < this.currentAsciibirdMeta.blocks[y].length; x++) {
|
||||
// console.log({ x, y, meta: JSON.stringify(this.currentAsciibirdMeta.blocks[y][x]) });
|
||||
|
||||
curBlock = this.currentAsciibirdMeta.blocks[y][x];
|
||||
|
||||
blockX = x * blockWidth
|
||||
h = blockHeight
|
||||
|
||||
this.ctx.fillStyle = curBlock.bg
|
||||
this.ctx.fillRect(blockX, blockY, blockWidth, blockHeight);
|
||||
this.ctx.fillStyle = curBlock.fg
|
||||
this.ctx.fillText( curBlock.char, blockX + 2 , blockY - 3 );
|
||||
}
|
||||
|
||||
}
|
||||
} else {
|
||||
console.log(JSON.stringify(this.currentAsciibirdMeta))
|
||||
}
|
||||
|
||||
|
||||
this.ctx.stroke()
|
||||
|
||||
},
|
||||
processMouseDown(e) {
|
||||
console.log("Mouse down")
|
||||
this.canvasClass(e)
|
||||
// this.canvasClass(e)
|
||||
this.selectionMode = true;
|
||||
this.startPosition.x = e.clientX;
|
||||
this.startPosition.y = e.clientY;
|
||||
|
|
@ -134,8 +196,8 @@ export default {
|
|||
this.ctx.stroke();
|
||||
}
|
||||
},
|
||||
canvasClass(e) {
|
||||
console.log("Mouse canvasClass")
|
||||
triangleTest(e) {
|
||||
console.log("Mouse triangleTest")
|
||||
// this.ctx = e.target;
|
||||
|
||||
this.ctx.strokeStyle = 'red';
|
||||
|
|
|
|||
正在加载...
在新工单中引用