Skip to content

Instantly share code, notes, and snippets.

@Meettya
Created April 18, 2013 22:03
Show Gist options
  • Save Meettya/5416608 to your computer and use it in GitHub Desktop.
Save Meettya/5416608 to your computer and use it in GitHub Desktop.
Raphael moveable&resizable rectangle with active cocners, proto
doctype html
html
head
meta(charset='utf-8', http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
title Project name
link(rel='stylesheet', href = 'css/style.css')
script(src='vendor/mock.js')
script(src='proxed/dump.json')
script(src='vendor/jquery-1.9.1.min.js')
script(src='vendor/raphael.v2.1.0.min.js')
:coffeescript
$ ->
paper = Raphael "canvas", 500, 500
rect1 = paper.rect(100, 100, 100, 100).attr
fill: "hsb(.8, 1, 1)"
stroke: "none"
opacity: .5
cursor: "move"
tr_path : ''
rect_start = () ->
@attr opacity : 1
rect_up = () ->
# restoring state
@attr opacity : .5
ts = "#{@transform()}"
@tr_path += ts.slice ts.lastIndexOf 't'
set = paper.set()
coord_list = [
[100, 100]
[200, 100]
[200, 200]
[100, 200]
]
for [x, y], idx in coord_list
circle = paper.circle(x, y, 8).attr
fill: "hsb(.5, .5, .3)"
stroke: "none"
opacity: .7
tr_path : ''
circle.idx = idx
set.push circle
rec_transform = (dx, dy) ->
@transform "#{@tr_path}t#{dx},#{dy}"
set.transform "#{@tr_path}t#{dx},#{dy}"
set_transfom = (dx, dy) ->
@transform "#{@tr_path}t#{dx},#{dy}"
console.log "#{@idx}"
rect1.drag rec_transform, rect_start, rect_up
set.drag set_transfom, rect_start, rect_up
body
div
p
| Its works
p
| As expected
div
p
| Просто проверим скорость обновления
span "#{Date()}"
div#canvas
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment