sorting by size

This commit is contained in:
Tomáš Mládek 2018-01-25 15:17:37 +01:00 committed by Tomáš Mládek
parent 7796dd0dcb
commit 5a9be050c1
2 changed files with 71 additions and 12 deletions

View file

@ -13,8 +13,21 @@
<div> <div>
<input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position"> <input type="range" min="0" :max="frames - 1" value="0" class="slider" v-model.number="position">
</div> </div>
<div>
<button @click="playPause">{{buttonLabel}}</button> <button @click="playPause">{{buttonLabel}}</button>
</div> </div>
<div>
<label for="sort">Sort by size</label>
<input type="checkbox" v-model="sortBySize" id="sort">
</div>
<div>
<label for="sortDirection">
<span v-if="sortDirection">Ascending</span>
<span v-else>Descending</span>
</label>
<input type="checkbox" v-model="sortDirection" id="sortDirection">
</div>
</div>
</div> </div>
</template> </template>
@ -22,8 +35,8 @@
export default { export default {
name: 'player', name: 'player',
props: { props: {
width: String, width: Number,
height: String height: Number
}, },
data: function () { data: function () {
return { return {
@ -32,6 +45,8 @@
playing: false, playing: false,
zoom: 1, zoom: 1,
fullscreen: false, fullscreen: false,
sortBySize: false,
sortDirection: false,
position: 0, position: 0,
tmp_ctx: null, tmp_ctx: null,
animation_id: null animation_id: null
@ -48,6 +63,47 @@
}, },
canvas_width: function () { canvas_width: function () {
return this.width * this.zoom return this.width * this.zoom
},
frame_sequence: function () {
if (this.image === null) return []
let sequence = []
for (let pos = 0; pos < this.frames; pos++) {
let wb = Math.ceil(this.image.width / this.width) // width_blocks
let x = (pos % wb) * this.width // x offset
let w = x + this.width < this.image.width ? this.width : this.image.width - x // frame width
let y = Math.floor(pos / wb) * this.height // y offset
let h = y + this.height < this.image.height ? this.height : this.image.height - y // frame height
sequence.push([x, y, w, h])
}
if (this.sortBySize) {
let tmpCanvas = document.createElement('canvas')
let ctx = tmpCanvas.getContext('2d')
let sizes = sequence.map((el, i) => {
if (tmpCanvas.width !== el[2] ||
tmpCanvas.height !== el[3]) {
tmpCanvas.width = el[2]
tmpCanvas.height = el[3]
}
ctx.drawImage(this.image, el[0], el[1], el[2], el[3],
0, 0, el[2], el[3])
return {index: i, length: tmpCanvas.toDataURL('image/png').length}
})
sizes.sort(function (a, b) {
return a.length - b.length
})
if (!this.sortDirection) {
sizes.reverse()
}
return sizes.map(function (el) {
return sequence[el.index]
})
} else {
return sequence
}
} }
}, },
mounted: function () { mounted: function () {
@ -94,11 +150,12 @@
ctx.fillRect(0, 0, parseInt(this.canvas_width), parseInt(this.canvas_height)) ctx.fillRect(0, 0, parseInt(this.canvas_width), parseInt(this.canvas_height))
}, },
$render: function () { $render: function () {
let wb = Math.ceil(this.image.width / this.width) let frame = this.frame_sequence[this.position]
let x = (this.position % wb) * this.width if (frame === undefined) return
let w = x + this.width < this.image.width ? this.width : this.image.width - x let x = frame[0]
let y = Math.floor(this.position / wb) * this.height let y = frame[1]
let h = y + this.height < this.image.height ? this.height : this.image.height - y let w = frame[2]
let h = frame[3]
if (w !== this.width || h !== this.height) this.clear('black') if (w !== this.width || h !== this.height) this.clear('black')
this.tmp_ctx.drawImage(this.image, this.tmp_ctx.drawImage(this.image,
x, y, w, h, x, y, w, h,

View file

@ -9,14 +9,16 @@
<hr> <hr>
<div> <div>
<label for="slice_x">Slice X: </label> <label for="slice_x">Slice X: </label>
<input class="spinBox" id="slice_x" v-model="guideSizeX" type="number" min="2" max="1024" step="1" value="64"> <input class="spinBox" id="slice_x" v-model.number="guideSizeX" type="number" min="2" max="1024" step="1"
value="64">
</div> </div>
<div> <div>
<label for="slice_x">No X remainder: {{noXremainder}}</label> <label for="slice_x">No X remainder: {{noXremainder}}</label>
</div> </div>
<div> <div>
<label for="slice_y">Slice Y: </label> <label for="slice_y">Slice Y: </label>
<input class="spinBox" id="slice_y" v-model="guideSizeY" type="number" min="2" max="1024" step="1" value="64"> <input class="spinBox" id="slice_y" v-model.number="guideSizeY" type="number" min="2" max="1024" step="1"
value="64">
</div> </div>
<div> <div>
<label for="slice_x">No Y remainder: {{noYremainder}}</label> <label for="slice_x">No Y remainder: {{noYremainder}}</label>
@ -57,8 +59,8 @@
data: function () { data: function () {
return { return {
imageSize: [-1, -1], imageSize: [-1, -1],
guideSizeX: '64', guideSizeX: 64,
guideSizeY: '64', guideSizeY: 64,
lastGuideSizeX: 64, lastGuideSizeX: 64,
lastGuideSizeY: 64, lastGuideSizeY: 64,
lockSize: true, lockSize: true,