Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
N
nodenogg-duplicate
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Deploy
Releases
Package Registry
Model registry
Operate
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
Adam Procter
nodenogg-duplicate
Commits
8c3a3309
Commit
8c3a3309
authored
5 years ago
by
Adam Procter
Browse files
Options
Downloads
Patches
Plain Diff
push the mess
parent
793e97d2
No related branches found
No related tags found
No related merge requests found
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
canvas-10-feb/src/components/HelloWorld.vue
+143
-11
143 additions, 11 deletions
canvas-10-feb/src/components/HelloWorld.vue
with
143 additions
and
11 deletions
canvas-10-feb/src/components/HelloWorld.vue
+
143
−
11
View file @
8c3a3309
...
...
@@ -3,13 +3,13 @@
<h1>
{{
msg
}}
</h1>
<!--
<canvas
ref=
"canvas"
:width=
"windowWidth"
:height=
"windowHeight"
></canvas>
-->
<canvas
ref=
"canvas"
></canvas>
<canvas
ref=
"canvas"
width=
"150"
height=
"150"
></canvas>
<div
class=
"controls"
>
<!--
<div
class=
"btn-row"
>
<div
class=
"btn-row"
>
<button
on:click=
"popups.showPane = !popups.showPane"
>
Button
</button>
</div>
<!--
<div
class=
"popup"
v-if=
"popups.showPane"
>
<div
class=
"popup-title"
>
Pane Title
</div>
<label>
...
...
@@ -26,23 +26,155 @@ export default {
props
:
{
msg
:
String
},
data
:
function
()
{
return
{
configRect
:
{
x
:
10
,
y
:
30
,
height
:
50
,
width
:
50
,
fill
:
'
rgb(200, 0, 0)
'
}
}
},
mounted
()
{
// listen for mouse events
// this.ctx.onmousedown = myDown
// this.ctx.onmouseup = myUp
// this.ctx.onmousemove = myMove
this
.
ctx
=
this
.
$refs
.
canvas
.
getContext
(
'
2d
'
)
this
.
ctx
.
width
=
window
.
innerWidth
this
.
ctx
.
height
=
window
.
innerHeight
-
60
this
.
ctx
.
fillStyle
=
'
#777
'
this
.
ctx
.
fillRect
(
10
,
20
,
100
,
100
)
this
.
ctx
.
fillRect
(
170
,
20
,
100
,
100
)
// this.draw()
this
.
ctx
.
fillStyle
=
'
rgb(200, 0, 0)
'
this
.
ctx
.
fillRect
(
this
.
x
,
this
.
y
,
this
.
height
,
this
.
width
)
this
.
ctx
.
fillStyle
=
'
rgba(0, 0, 200, 0.5)
'
this
.
ctx
.
fillRect
(
30
,
30
,
50
,
50
)
// this.ctx.font = '48px serif'
// this.ctx.fillText('Hello world', 10, 50)
}
// methods: {
// draw() {
// this.clear()
// // redraw each shape in the shapes[] array
// for (var i = 0; i
<
this
.
shapes
.
length
;
i
++
)
{
// // decide if the shape is a rect or circle
// // (it's a rect if it has a width property)
// if (this.shapes[i].width) {
// rect(this.shapes[i])
// } else {
// circle(this.shapes[i])
// }
// }
// },
// clear() {
// this.ctx.clearRect(0, 0, WIDTH, HEIGHT)
// }
// }
}
// drag related variables
// var dragok = false
// var startX
// var startY
// handle mousedown events
// function myDown(e) {
// // tell the browser we're handling this mouse event
// e.preventDefault()
// e.stopPropagation()
// // get the current mouse position
// var mx = parseInt(e.clientX - offsetX)
// var my = parseInt(e.clientY - offsetY)
// // test each shape to see if mouse is inside
// dragok = false
// for (var i = 0; i
<
shapes
.
length
;
i
++
)
{
// var s = shapes[i]
// // decide if the shape is a rect or circle
// if (s.width) {
// // test if the mouse is inside this rect
// if (mx > s.x && mx
<
s
.
x
+
s
.
width
&&
my
>
s
.
y
&&
my
<
s
.
y
+
s
.
height
)
{
// // if yes, set that rects isDragging=true
// dragok = true
// s.isDragging = true
// }
// } else {
// var dx = s.x - mx
// var dy = s.y - my
// // test if the mouse is inside this circle
// if (dx * dx + dy * dy
<
s
.
r
*
s
.
r
)
{
// dragok = true
// s.isDragging = true
// }
// }
// }
// // save the current mouse position
// startX = mx
// startY = my
// }
// // handle mouseup events
// function myUp(e) {
// // tell the browser we're handling this mouse event
// e.preventDefault()
// e.stopPropagation()
// // clear all the dragging flags
// dragok = false
// for (var i = 0; i
<
shapes
.
length
;
i
++
)
{
// shapes[i].isDragging = false
// }
// }
// // handle mouse moves
// function myMove(e) {
// // if we're dragging anything...
// if (dragok) {
// // tell the browser we're handling this mouse event
// e.preventDefault()
// e.stopPropagation()
// // get the current mouse position
// var mx = parseInt(e.clientX - offsetX)
// var my = parseInt(e.clientY - offsetY)
// // calculate the distance the mouse has moved
// // since the last mousemove
// var dx = mx - startX
// var dy = my - startY
// // move each rect that isDragging
// // by the distance the mouse has moved
// // since the last mousemove
// for (var i = 0; i
<
shapes
.
length
;
i
++
)
{
// var s = shapes[i]
// if (s.isDragging) {
// s.x += dx
// s.y += dy
// }
// }
// // redraw the scene with the new rect positions
// draw()
// // reset the starting mouse position for the next mousemove
// startX = mx
// startY = my
// }
// }
//
</
script
>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<
style
scoped
>
canvas
{
width
:
100%
;
height
:
calc
(
100vh
-
60px
);
background-color
:
white
;
border
:
1px
solid
black
;
/* width: 100%; */
/* height: 150px;
background-color: white; */
}
.controls
{
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment