|
17 | 17 |
|
18 | 18 | line |
19 | 19 | rectangle |
| 20 | + square |
20 | 21 | circle |
21 | 22 | text |
| 23 | + triangle |
22 | 24 |
|
23 | 25 | place-image |
24 | 26 | place-images |
|
242 | 244 | radius radius ;; radius-x, radius-y |
243 | 245 | 0 0 (twice #js.Math.PI)))))]) |
244 | 246 |
|
| 247 | +(define-proto Polygon |
| 248 | + #:init |
| 249 | + (λ (vertices mode pen-or-color) |
| 250 | + (define xs (map posn-x vertices)) |
| 251 | + (define ys (map posn-y vertices)) |
| 252 | + |
| 253 | + (define width (- (apply max xs) (apply min xs))) |
| 254 | + (define height (- (apply max ys) (apply min xs))) |
| 255 | + |
| 256 | + (set-object! #js*.this |
| 257 | + [type "polygon"] |
| 258 | + [vertices vertices] |
| 259 | + [width width] |
| 260 | + [height height] |
| 261 | + [mode mode] |
| 262 | + [pen pen-or-color])) |
| 263 | + #:prototype-fields |
| 264 | + [render |
| 265 | + (λ (ctx x y) |
| 266 | + (define first-point (car #js*.this.vertices)) |
| 267 | + (define rest-points (cdr #js*.this.vertices)) |
| 268 | + (define radius #js*.this.radius) |
| 269 | + (with-origin ctx [x y] |
| 270 | + (with-path ctx {#js*.this.mode #js*.this.pen} |
| 271 | + (#js.ctx.moveTo (posn-x first-point) (posn-y first-point)) |
| 272 | + (let loop ([points rest-points]) |
| 273 | + (unless (null? points) |
| 274 | + (define pt (car points)) |
| 275 | + (#js.ctx.lineTo (posn-x pt) (posn-y pt)) |
| 276 | + (loop (cdr points)))))))]) |
| 277 | + |
245 | 278 | (define (empty-scene width height) |
246 | 279 | (new (EmptyScene width height #f))) |
247 | 280 |
|
|
262 | 295 | (define (rectangle w h m p) |
263 | 296 | (new (Rectangle w h m p))) |
264 | 297 |
|
| 298 | +(define (square s m p) |
| 299 | + (new (Rectangle s s m p))) |
| 300 | + |
265 | 301 | (define (circle r m p) |
266 | 302 | (new (Circle r m p))) |
267 | 303 |
|
| 304 | +(define (triangle side mode color) |
| 305 | + ;; height = side * sin(45) |
| 306 | + (define height (* side (/ (sqrt 3) 2))) |
| 307 | + (new (Polygon (list (posn (- (/ side 2)) (/ height 2)) |
| 308 | + (posn 0 (- (/ height 2))) |
| 309 | + (posn (/ side 2) (/ height 2))) |
| 310 | + mode |
| 311 | + color))) |
268 | 312 |
|
269 | 313 | ;;----------------------------------------------------------------------------- |
270 | 314 | ;; Combine images |
|
301 | 345 | ;; Center of image is (0, 0), which is also center of bigger |
302 | 346 | ;; image. Calculate the distance of centers of images from this |
303 | 347 | ;; final center. |
304 | | - ;; |
| 348 | + ;; |
305 | 349 | ;; When given an xy offset, we start by placing each image on top |
306 | 350 | ;; of each other. We line up the images at upper-right corner of |
307 | 351 | ;; new canvas to start with and then translate the appropriate |
|
510 | 554 | (define new-x |
511 | 555 | (case x-place |
512 | 556 | [("left") (+ (half #js.image.width) x)] |
513 | | - [("right") (- (half #js.image.width) x)] |
| 557 | + [("right") (- x (half #js.image.width))] |
514 | 558 | [("center" "middle") x])) |
515 | 559 | (define new-y |
516 | 560 | (case y-place |
517 | 561 | [("top") (+ (half #js.image.height) y)] |
518 | | - [("bottom") (- (half #js.image.height) y)] |
| 562 | + [("bottom") (- y (half #js.image.height))] |
519 | 563 | [("center" "middle") y])) |
520 | 564 | (posn new-x new-y)) |
521 | 565 |
|
|
0 commit comments