dragAndDrop
dragAndDrop
COMMENT
Drag the image with the mouse
open
https://sideex.github.io/example/webpage_under_test/canvas-to-draw.html
COMMENT
Choose color
clickAt
id=green
//div[2]
//div[@id='green']
css=#green
6,3
COMMENT
Draw by using drag and drop
dragAndDrop
id=can
//canvas[1]
//canvas[@id='can']
css=#can
{"StartPoint":{"X":98,"Y":51},"Movements":[{"TD":102,"OX":-1,"OY":0},{"TD":24,"OX":-1,"OY":0},{"TD":16,"OX":-7,"OY":2},{"TD":16,"OX":-11,"OY":3},{"TD":16,"OX":-11,"OY":4},{"TD":16,"OX":-11,"OY":4},{"TD":24,"OX":-19,"OY":8},{"TD":16,"OX":-10,"OY":6},{"TD":16,"OX":-7,"OY":6},{"TD":16,"OX":-7,"OY":3},{"TD":16,"OX":-3,"OY":3},{"TD":16,"OX":-3,"OY":2},{"TD":16,"OX":-3,"OY":2},{"TD":8,"OX":0,"OY":2},{"TD":56,"OX":0,"OY":0},{"TD":16,"OX":1,"OY":1},{"TD":24,"OX":6,"OY":1},{"TD":16,"OX":10,"OY":2},{"TD":16,"OX":12,"OY":4},{"TD":16,"OX":12,"OY":3},{"TD":16,"OX":12,"OY":2},{"TD":16,"OX":16,"OY":1},{"TD":16,"OX":13,"OY":2},{"TD":16,"OX":12,"OY":3},{"TD":16,"OX":7,"OY":1},{"TD":16,"OX":4,"OY":2},{"TD":16,"OX":4,"OY":1},{"TD":16,"OX":3,"OY":1},{"TD":32,"OX":1,"OY":0},{"TD":16,"OX":0,"OY":1},{"TD":32,"OX":0,"OY":1},{"TD":24,"OX":-1,"OY":2},{"TD":16,"OX":-3,"OY":4},{"TD":16,"OX":-6,"OY":4},{"TD":16,"OX":-8,"OY":4},{"TD":16,"OX":-10,"OY":8},{"TD":16,"OX":-12,"OY":4},{"TD":16,"OX":-10,"OY":5},{"TD":16,"OX":-8,"OY":3},{"TD":24,"OX":-9,"OY":4},{"TD":16,"OX":-3,"OY":2},{"TD":8,"OX":-2,"OY":0},{"TD":16,"OX":0,"OY":1}]}
COMMENT
Choose color
clickAt
id=blue
//div[3]
//div[@id='blue']
css=#blue
5,2
dragAndDrop
id=can
//canvas[1]
//canvas[@id='can']
css=#can
{"StartPoint":{"X":148,"Y":115},"Movements":[{"TD":20,"OX":1,"OY":1},{"TD":9,"OX":0,"OY":0},{"TD":7,"OX":1,"OY":0},{"TD":16,"OX":2,"OY":3},{"TD":16,"OX":1,"OY":3},{"TD":24,"OX":0,"OY":6},{"TD":16,"OX":0,"OY":5},{"TD":16,"OX":0,"OY":6},{"TD":16,"OX":0,"OY":5},{"TD":16,"OX":0,"OY":4},{"TD":16,"OX":0,"OY":2},{"TD":16,"OX":0,"OY":2},{"TD":24,"OX":0,"OY":0},{"TD":8,"OX":0,"OY":1},{"TD":8,"OX":0,"OY":1}]}
dragAndDrop
id=can
//canvas[1]
//canvas[@id='can']
css=#can
{"StartPoint":{"X":144,"Y":72},"Movements":[{"TD":7,"OX":1,"OY":0},{"TD":24,"OX":2,"OY":0},{"TD":16,"OX":2,"OY":0},{"TD":16,"OX":4,"OY":0},{"TD":16,"OX":3,"OY":0},{"TD":16,"OX":4,"OY":0},{"TD":16,"OX":3,"OY":0},{"TD":16,"OX":4,"OY":0},{"TD":16,"OX":2,"OY":0},{"TD":55,"OX":0,"OY":0},{"TD":17,"OX":0,"OY":0}]}
COMMENT
Choose color
clickAt
id=red
//div[4]
//div[@id='red']
css=#red
5,6
dragAndDrop
id=can
//canvas[1]
//canvas[@id='can']
css=#can
{"StartPoint":{"X":224,"Y":46},"Movements":[{"TD":14,"OX":0,"OY":-1},{"TD":16,"OX":1,"OY":1},{"TD":17,"OX":1,"OY":2},{"TD":15,"OX":1,"OY":4},{"TD":16,"OX":2,"OY":6},{"TD":16,"OX":0,"OY":10},{"TD":16,"OX":0,"OY":8},{"TD":24,"OX":0,"OY":19},{"TD":16,"OX":-2,"OY":10},{"TD":16,"OX":-2,"OY":8},{"TD":16,"OX":-1,"OY":3},{"TD":16,"OX":0,"OY":2},{"TD":32,"OX":0,"OY":2},{"TD":32,"OX":0,"OY":1},{"TD":16,"OX":0,"OY":1},{"TD":16,"OX":0,"OY":2},{"TD":96,"OX":0,"OY":0},{"TD":8,"OX":-1,"OY":-1},{"TD":16,"OX":-2,"OY":-2},{"TD":15,"OX":-2,"OY":-1},{"TD":16,"OX":-2,"OY":-4},{"TD":16,"OX":-4,"OY":-3},{"TD":16,"OX":-2,"OY":-1},{"TD":16,"OX":-2,"OY":0},{"TD":16,"OX":-2,"OY":0},{"TD":24,"OX":-2,"OY":-1},{"TD":16,"OX":-1,"OY":0},{"TD":16,"OX":-2,"OY":0},{"TD":16,"OX":-1,"OY":0},{"TD":8,"OX":0,"OY":1},{"TD":16,"OX":-2,"OY":0},{"TD":16,"OX":-2,"OY":1},{"TD":16,"OX":0,"OY":1},{"TD":24,"OX":-1,"OY":1},{"TD":16,"OX":-1,"OY":1},{"TD":16,"OX":-1,"OY":2},{"TD":16,"OX":0,"OY":2},{"TD":24,"OX":-1,"OY":3},{"TD":16,"OX":0,"OY":2},{"TD":16,"OX":1,"OY":2},{"TD":17,"OX":1,"OY":2},{"TD":15,"OX":1,"OY":2},{"TD":16,"OX":1,"OY":1},{"TD":8,"OX":1,"OY":1},{"TD":24,"OX":3,"OY":2},{"TD":24,"OX":1,"OY":0},{"TD":8,"OX":2,"OY":0},{"TD":16,"OX":1,"OY":0},{"TD":16,"OX":1,"OY":0},{"TD":16,"OX":3,"OY":0},{"TD":24,"OX":4,"OY":0},{"TD":16,"OX":0,"OY":-1},{"TD":16,"OX":2,"OY":-2},{"TD":16,"OX":1,"OY":0},{"TD":8,"OX":0,"OY":-1},{"TD":40,"OX":0,"OY":-1},{"TD":32,"OX":0,"OY":-1},{"TD":16,"OX":1,"OY":-1},{"TD":16,"OX":0,"OY":-1}]}
dragAndDrop
id=can
//canvas[1]
//canvas[@id='can']
css=#can
{"StartPoint":{"X":266,"Y":125},"Movements":[{"TD":95,"OX":1,"OY":0},{"TD":8,"OX":1,"OY":0},{"TD":16,"OX":2,"OY":0},{"TD":16,"OX":2,"OY":-1},{"TD":16,"OX":3,"OY":-1},{"TD":16,"OX":4,"OY":-4},{"TD":24,"OX":5,"OY":-3},{"TD":16,"OX":1,"OY":-3},{"TD":16,"OX":2,"OY":-3},{"TD":16,"OX":1,"OY":-2},{"TD":16,"OX":0,"OY":-1},{"TD":16,"OX":0,"OY":-1},{"TD":16,"OX":-1,"OY":-2},{"TD":8,"OX":-1,"OY":0},{"TD":24,"OX":-3,"OY":0},{"TD":16,"OX":-3,"OY":-1},{"TD":16,"OX":-7,"OY":-1},{"TD":16,"OX":-4,"OY":0},{"TD":24,"OX":-5,"OY":0},{"TD":16,"OX":-2,"OY":0},{"TD":16,"OX":-2,"OY":2},{"TD":16,"OX":-3,"OY":3},{"TD":16,"OX":-2,"OY":4},{"TD":16,"OX":-1,"OY":3},{"TD":16,"OX":0,"OY":4},{"TD":16,"OX":2,"OY":3},{"TD":17,"OX":2,"OY":3},{"TD":15,"OX":3,"OY":2},{"TD":16,"OX":4,"OY":2},{"TD":16,"OX":4,"OY":0},{"TD":16,"OX":3,"OY":1},{"TD":24,"OX":3,"OY":2},{"TD":16,"OX":2,"OY":1},{"TD":32,"OX":1,"OY":0},{"TD":48,"OX":2,"OY":0}]}
dragAndDrop
id=can
//canvas[1]
//canvas[@id='can']
css=#can
{"StartPoint":{"X":288,"Y":124},"Movements":[{"TD":6,"OX":0,"OY":-1},{"TD":16,"OX":4,"OY":0},{"TD":15,"OX":3,"OY":0},{"TD":24,"OX":5,"OY":0},{"TD":16,"OX":2,"OY":-1},{"TD":16,"OX":3,"OY":-1},{"TD":16,"OX":2,"OY":-1},{"TD":16,"OX":3,"OY":0},{"TD":16,"OX":2,"OY":-2},{"TD":16,"OX":2,"OY":-1},{"TD":16,"OX":0,"OY":-1},{"TD":16,"OX":0,"OY":-1},{"TD":16,"OX":0,"OY":-2},{"TD":16,"OX":0,"OY":-1},{"TD":24,"OX":0,"OY":-1},{"TD":16,"OX":0,"OY":-3},{"TD":16,"OX":-1,"OY":0},{"TD":16,"OX":-1,"OY":-1},{"TD":16,"OX":-1,"OY":-1},{"TD":16,"OX":-3,"OY":0},{"TD":16,"OX":-1,"OY":0},{"TD":16,"OX":-4,"OY":0},{"TD":16,"OX":-3,"OY":2},{"TD":16,"OX":-3,"OY":0},{"TD":17,"OX":-2,"OY":3},{"TD":16,"OX":-3,"OY":1},{"TD":16,"OX":0,"OY":3},{"TD":8,"OX":0,"OY":1},{"TD":32,"OX":0,"OY":2},{"TD":16,"OX":0,"OY":2},{"TD":16,"OX":0,"OY":4},{"TD":16,"OX":2,"OY":2},{"TD":16,"OX":2,"OY":2},{"TD":16,"OX":1,"OY":1},{"TD":16,"OX":1,"OY":2},{"TD":16,"OX":4,"OY":1},{"TD":17,"OX":2,"OY":1},{"TD":16,"OX":2,"OY":1},{"TD":24,"OX":2,"OY":0},{"TD":16,"OX":2,"OY":0},{"TD":8,"OX":1,"OY":0},{"TD":24,"OX":3,"OY":0},{"TD":16,"OX":2,"OY":0},{"TD":16,"OX":0,"OY":0}]}
dragAndDrop
id=can
//canvas[1]
//canvas[@id='can']
css=#can
{"StartPoint":{"X":342,"Y":66},"Movements":[{"TD":22,"OX":-1,"OY":0},{"TD":16,"OX":1,"OY":1},{"TD":16,"OX":3,"OY":3},{"TD":16,"OX":4,"OY":8},{"TD":16,"OX":9,"OY":11},{"TD":16,"OX":11,"OY":15},{"TD":16,"OX":11,"OY":13},{"TD":15,"OX":9,"OY":13},{"TD":16,"OX":4,"OY":8},{"TD":16,"OX":2,"OY":4},{"TD":16,"OX":2,"OY":2},{"TD":24,"OX":2,"OY":4}]}
dragAndDrop
id=can
//canvas[1]
//canvas[@id='can']
css=#can
{"StartPoint":{"X":384,"Y":70},"Movements":[{"TD":17,"OX":0,"OY":0},{"TD":15,"OX":-1,"OY":-1},{"TD":16,"OX":-2,"OY":1},{"TD":16,"OX":-2,"OY":3},{"TD":16,"OX":-7,"OY":4},{"TD":16,"OX":-11,"OY":11},{"TD":16,"OX":-12,"OY":12},{"TD":16,"OX":-13,"OY":12},{"TD":16,"OX":-15,"OY":13},{"TD":16,"OX":-6,"OY":10},{"TD":16,"OX":-3,"OY":5},{"TD":16,"OX":-1,"OY":1},{"TD":56,"OX":0,"OY":1}]}