Scribd
Upload
7 views18 pages

Lab08 PDF

Uploaded by

Harsimar Rattan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views18 pages

Lab08 PDF

Uploaded by

Harsimar Rattan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

CS-3035

31/10/2024
Today

• Hit Testing!
• Data Parsing!
• More Drawing!
• Tricks or Treats?
Hit Testing

• We usually manipulate GUIs with a “Pointing Device”


• Touch screen, pen input, or like here; a mouse cursor
• This includes Graphical Content, Widgets, etc..
• So – we need to know what the cursor is pointing at
what is it pointing at?

• Again, all graphical elements are just shapes.


• Can be filled, an outline, simple, or special and complex; like text
• We need to determine if our pointer is inside these shapes
• Also, sometimes consider tolerances
• sometimes even make near misses into hits for small or weird shapes
• We do this with models to describe shapes and hit-tests to detect if
our cursor is inside that model’s bounds.
• Basically, think of hit boxes in video games.
Shape Models

• Model: mathematical representation of the rendered shape


• geometry (points, bounds, key dimensions, …)
• visual style properties (fill, stroke, …)
• transformations (translations, rotations, …)
• operations (event handling, hit-testing, …)
• Rendering: process to translate model into an image
• Image: rendered shape based on underlying model
Shape Models

Model Image
Rendering
(x0,y0)

(x4,y4) (x1,y1)

(x3,y3) (x2,y2)
fill =
Shape Model Geography
• Different shapes have different geometric representations
(x0,y0)
(x,y)

(x4,y4) (x1,y1) (x,y) r


h

(x3,y3) (x2,y2)
w
Polygon Circle Rectangle
list of points centre point top-left corner point
radius width and height

• Plus many more, and combinations of shapes


Hit Test Paradigms
Inside Hit-Test Edge Hit-Test
• Is mouse cursor inside shape? • Is mouse cursor on shape stroke?
• Usually when closed shapes are • Usually with unfilled or open shapes
rendered with fill like Line, or Polyline
Hit test Implementation
• For a rectangle Inside Hit Test:

• Given: (x,y)
• mouse position (mx, my) (mx,my)
• rectangle top-left corner (x, y) h
• rectangle width w and height h
• Inside hit is true when these are true:
• mx is in range [x, x + w]
w
• my is in range [y, y + h]
Hit test Implementation
function insideHitTestRectangle(
mx: number,
my: number, (x,y)
x: number, y: number,
(mx,my)
w: number, h: number h
) {
return mx >= x &&
mx <= x + w &&
w
my >= y &&
my <= y + h
}
Hit test Implementation
• For a rectangle edge Hit Test:
• Given:
• mx, my, x, y, w, h, (x,y)
• stroke width S
(mx,my)
• Inside hit is true when these are true: h
• mx is in range [x - s/2, x + w + s/2]
• my is in range [y - s/2, y + h + s/2]
• But these are false
w
• mx is in range (x + s/2, x + w - s/2)
• my is in range (y + s/2, y + h - s/2)
Hit test Implementation
function edgeHitTestRectangle(
mx, my, x, y, w, h: number
strokeWidth: number
) {
const s = strokeWidth / 2;
const outer = mx >= x-s && mx <= x+w+s &&
my >= y-s && my <= y+h+s;
const inner = mx > x+s && mx < x+w-s &&
my > y+s && my < y+h-s;
return outer && !inner;
}
Hit test Implementation

• Hit tests must be tailored to the model


• Circles use center and radius
• lines use closest point and distance of line segments
Data Parsing

• Hard coding datasets is bad news


• Grab your data from a JSON file!
• That’s “JavaScript Object Notation”
• Basically, a lightweight datafile readable in JS/TS
• Works like a dictionary with Key-Value Pairs
Data Parsing

• You can import the data natively and easily:


• import data from "./pathto/file.json";
• Then just process the data in loops and functions
MORE DRAWING

• This week we’re drawing on the canvas again.


• A lot of the same stuff as last week…
• But more!
• Scaling, rotating, and measuring drawn objects
• and (importantly) Translating!
• which you may have done last week
Activity 06 Part 1

• It’s graph time


• Make a panel and put a graph on it
• This time center it – and keep it centered
• Consider how the draw callback works!
• Make a drawable text class and label it
• Text measuring is already in SimpleKit!
• Plot the graph: Parse a JSON and draw all the points (skCirc)
• Quite specific requirements this time: Read the README carefully
Activity 06 Part 2

• Build on the same graph


• Add some axis labels
• You’ll have to rotate the text here, you can find how in the source code
• Make a hit testing system for circles
• Use it to test if you’re mousing over the data points
• Display a tool tip showing the x,y coordinates of the point
• The raw coordinates, not the translated ones!
• Quite specific requirements in the README again

You might also like