Atlas48/pointvec
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf: Draw grid as a single path

Browse Source 
Drawing the grid as a single path is much more efficient than each
marker having their own path that's begun, filled, and closed,
especially when there are plenty of them.
This commit is contained in:
Aarni Koskela 2020-05-18 09:45:08 +03:00
parent 52baf35757
commit 1920112500
2 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -1110,16 +1110,24 @@ function Renderer (client) {
this.drawGrid = function () {
if (!this.showExtras) { return }
const markers = { w: parseInt(client.tool.settings.size.width / 15), h: parseInt(client.tool.settings.size.height / 15) }
this.context.beginPath()
this.context.lineWidth = 2
this.context.fillStyle = client.theme.active.b_med
for (let x = markers.w - 1; x >= 0; x--) {
for (let y = markers.h - 1; y >= 0; y--) {
const isStep = x % 4 === 0 && y % 4 === 0
if (x === 0 || y === 0) { continue }
this.drawMarker({
const pos = {
x: parseInt(x * 15),
y: parseInt(y * 15)
}, isStep ? 2.5 : 1.5, client.theme.active.b_med)
}
const radius = isStep ? 2.5 : 1.5
this.context.moveTo(pos.x * this.scale, pos.y * this.scale)
this.context.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false)
}
}
this.context.fill()
this.context.closePath()
}
this.drawRulers = function () {
if (!client.cursor.translation) { return }
@ -1143,14 +1151,6 @@ function Renderer (client) {
}
this.drawPath(path, style)
}
this.drawMarker = function (pos, radius = 1, color) {
this.context.beginPath()
this.context.lineWidth = 2
this.context.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false)
this.context.fillStyle = color
this.context.fill()
this.context.closePath()
}
this.drawVertex = function (pos, radius = 5) {
this.context.beginPath()
this.context.lineWidth = 2

21
scripts/renderer.js
View File

@ -107,17 +107,25 @@ function Renderer (client) {
const markers = { w: parseInt(client.tool.settings.size.width / 15), h: parseInt(client.tool.settings.size.height / 15) }
this.context.beginPath()
this.context.lineWidth = 2
this.context.fillStyle = client.theme.active.b_med
for (let x = markers.w - 1; x >= 0; x--) {
for (let y = markers.h - 1; y >= 0; y--) {
const isStep = x % 4 === 0 && y % 4 === 0
// Don't draw margins
if (x === 0 || y === 0) { continue }
this.drawMarker({
const pos = {
x: parseInt(x * 15),
y: parseInt(y * 15)
}, isStep ? 2.5 : 1.5, client.theme.active.b_med)
}
const radius = isStep ? 2.5 : 1.5
this.context.moveTo(pos.x * this.scale, pos.y * this.scale)
this.context.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false)
}
}
this.context.fill()
this.context.closePath()
}
this.drawRulers = function () {
@ -150,15 +158,6 @@ function Renderer (client) {
// Elements
this.drawMarker = function (pos, radius = 1, color) {
this.context.beginPath()
this.context.lineWidth = 2
this.context.arc(pos.x * this.scale, pos.y * this.scale, radius, 0, 2 * Math.PI, false)
this.context.fillStyle = color
this.context.fill()
this.context.closePath()
}
this.drawVertex = function (pos, radius = 5) {
this.context.beginPath()
this.context.lineWidth = 2