-
Notifications
You must be signed in to change notification settings - Fork 1
/
image_edit_001.html
59 lines (48 loc) · 1.62 KB
/
image_edit_001.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script src="https://cdn.jsdelivr.net/ace/1.2.6/min/ace.js"></script>
<script src="https://cdn.jsdelivr.net/ace/1.2.6/min/ext-language_tools.js"></script>
<body style="margin:0px"></body>
<script>
var image_size_px = window.innerWidth / 2
var image_size = image_size_px * devicePixelRatio
var D = document.createElement('div')
D.innerHTML = '<div style="display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%"></div>'
var d1 = D.firstChild
document.body.append(d1)
D.innerHTML = '<div id="input" style="width:100%;height:100%"></div>'
var d2 = D.firstChild
d1.append(d2)
ace.require('ace/ext/language_tools')
var editor = ace.edit('input')
editor.setTheme('ace/theme/monokai')
editor.renderer.setShowGutter(true)
editor.setShowPrintMargin(false)
editor.setShowFoldWidgets(false)
editor.setOptions({
fontFamily: 'Menlo,monospace',
fontSize: '9pt',
wrap: true,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
})
editor.getSession().setMode('ace/mode/javascript')
editor.getSession().setValue(`
g.beginPath()
g.moveTo(0, 0)
g.lineTo(c.width, c.height)
g.strokeStyle = 'red'
g.stroke()
`)
document.body.onkeydown = function (e) {
if ((e.shiftKey || e.ctrlKey || e.metaKey) && ((e.keyCode == 83 && !e.shiftKey) || e.keyCode == 13)) {
e.preventDefault()
eval(editor.getSession().getValue())
}
}
D.innerHTML = `<canvas style="width:${image_size_px};height:${image_size_px}" width="${image_size}" height="${image_size}"></canvas>`
var c = D.firstChild
var g = c.getContext('2d')
d1.append(c)
function lerp(t0, v0, t1, v1, t) {
return (t - t0) * (v1 - v0) / (t1 - t0) + v0
}
</script>