Damian Dawber - Learning Raphael JS Vector Graphics [2013, PDF, ENG]

Примеры страниц

Оглавление

• Chapter 1: The Graphical Web 5
  • Vector drawing on the Web 6
    
  • Vector drawing libraries 7
    
  • The SVG specification 8
    
  • Working with Raphaël rather than SVG directly 9
    
  • Applications of Raphaël 9
    
  • Downloading Raphaël 10
    
  • Creating Raphaël JavaScript applications 11
    
  • Project structure and optimization 11
    
  • Summary 11
• Chapter 2: Basic Drawing with Raphaël 13
  • The drawing context 13
    
  • Canvas coordinates 15
    
  • Drawing basic shapes 16
    
  • Embedding images 18
    
  • Element attributes 18
    
  • Basic fills 19
    
  • Image fills 19
    
  • Applying strokes 20
    
  • Other attributes 21
    
  • href 21
    
  • opacity 22
    
  • clip-rect 22
    
  • Applying gradients 23
    
  • Linear gradients 23
    
  • Radial gradients 25
    
  • Grouping elements 27
    
  • Working with text 28
    
  • Embedding custom fonts 29
    
  • Summary 30
• Chapter 3: Drawing Paths
  • Path drawing concepts 32
    
  • Path drawing commands 33
    
  • The moveto command 34
    
  • The lineto commands 35
    
  • The closepath command 37
    
  • Drawing curves 38
    
  • Quadratic Bézier curves 38
    
  • Cubic Bézier curves 41
    
  • Drawing arcs 43
    
  • Utility methods for working with paths 46
    
  • Element.getTotalLength() 46
    
  • Element.getPointAtLength(length) 47
    
  • Element.getSubpath(from, to) 48
    
  • Catmull-Rom curves 49
    
  • Summary 50
• Chapter 4: Transformations and Event Handling 51
  • Basic transformations and event handling 52
    
  • Basic transformations 52
    
  • Translation 53
    
  • Rotation 53
    
  • Scaling 55
    
  • Basic event handling 55
    
  • Registering basic event handlers 55
    
  • Unregistering basic event handlers 57
    
  • Working with matrices 58
    
  • Transformation matrices 58
    
  • Using transformation matrices 58
    
  • The drag-and-drop functionality 60
    
  • The Element.drag() method 60
    
  • The onstart event handler 60
    
  • The onend event handler 60
    
  • The onmove event handler 60
    
  • Dragging by example 61
    
  • Dropping elements 62
    
  • Bounding box overlapping 62
    
  • Bounding box inside bounding box 63
    
  • Summary 64
• Chapter 5: Vector Animation 65
  • Basic animation 66
    
  • Animating paths 67
    
  • Animation easing 70
    
  • Built-in easing formulas 70
    
  • Custom easing using the cubic Bézier format 71
    
  • Animating transformations 72
    
  • Animation using custom attributes 73
    
  • Custom attributes 73
    
  • Animation along a path 76
    
  • Pausing and resuming animation 78
    
  • Summary 79
• Chapter 6: Working with Existing SVGs 81
  • Inkscape 82
    
  • Downloading Inkscape 82
    
  • Getting started with Inkscape 82
    
  • Inspecting paths 87
    
  • Inkscape's XML Editor 87
    
  • Taking paths from an existing SVG image 89
    
  • SVG to Raphaël conversion tools 90
    
  • Ready Set Raphaël 90
    
  • Other converters 91
    
  • Choropleth maps 92
    
  • Creating choropleth maps 92
    
  • Open source SVGs 96
    
  • Summary 96
• Chapter 7: Creating a Suite of Social Media Visualizations 97
  • Social network usage 97
    
  • Getting started 98
    
  • Using jQuery 99
    
  • Social network usage data 99
    
  • Drawing people icons 100
    
  • Responding to icon clicks 101
    
  • Drawing a key 102
    
  • Tweets by time 103
    
  • Getting started 104
    
  • Tweets by time data 104
    
  • The subtend custom attribute 105
    
  • The counts custom attribute 106
    
  • Updating the timer 106
    
  • The animate helper method 107
    
  • Iterating over our timers and starting the animation 108
    
  • Supplementary material 108
    
  • Facebook usage by year 108
    
  • Golden tweets 109
    
  • The future of Raphaël 110
    
  • Milestones 110
    
  • Long term goals 110
    
  • Summary 111
    
  • Index 113