-
Notifications
You must be signed in to change notification settings - Fork 68
/
README
158 lines (113 loc) · 7.33 KB
/
README
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
jQuery-html5-canvas-panorama-plugin
From June 11 2012 from Kei Kim([email protected])
Added a sample page users can directly view on the net
Check following pages to see ddpanorama in action:
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.dynamicspeed.html
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.eventredraw2.html (NEW)
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.drawlabels.html (NEW)
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.event.html
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.eventredraw.html
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.dynamicsize.html
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.dynamicinteractive.html
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.pos.html
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.loop.html
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.basic.html
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.minspeed.html
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.size.html
https://htmlpreview.github.io/?https://github.com/nicekei/jQuery-html5-canvas-panorama-plugin/blob/master/sample.interactive.html
<Version history>
1.43 : Fixed a bug firing ddredraw event first when minSpeed exists(!=0)
1.42 : Fixed scrollX to be always within (-width*0.5, width*0.5) for the looped
image, so that users can more conveniently draw stuffs using this
parameter.
Examples:
ex1) width:100, scrollX:90 -> -10
ex2) width:100, scrollX:-60 -> 40
Now ddpanorama uses imagesLoaded script to catch the image load event.
As the load event has some drawbacks(https://api.jquery.com/load-event/),
I decided to adapt other method. eg. Prior to this version, applying
ddpanorama after the image is fully loaded was not working well, but it
now just works
Added html element overlay example. Now you can see other elements
positioned over canvas element. Other way of implementation might be
drawing some texts on canvas and checking if the user clicks one of those
texts’ bounding rectangles, but it would be definitely cumbersome/hard to
predict the final result.
Instead, I positioned already existing handy HTML elements on top of
canvas, so that users can see/control the result beforehand.
1.41 : Delayed resizing/attachment after the panorama image is completely
loaded
1.40 : Now CSS is separated from codes. Note that to work as
before, you need to include "ddpanorama.css" as a stylesheet in your
pages
Event prefix is changed from "ddpanorama_" to "dd".
eg. ddpanorama_redraw -> ddredraw
"init" event is added which is called when the canvas is initialized
- a good place to retrieve canvas and apply any additional properties
to it
In case the interactive flag is turned off, the panning cursor didn't
showup in Webkit browsers(up to 1.31). This is fixed in the current
version.
Event demo(sample.event.html) code is rewritten. Now you can check
all the event life cycles
("startmove", "stopmove", "mousedown", "mouseup" events are added)
Fullscreen demo(sample.dynamicsize.html) code is refactored to show the
demonstration clearly.
Note that the ugly bottom scroll bar is gone by CSS's blessing
(width:100%)
Redraw event demo(sample.eventredraw.html) shows how to draw something on
top of the panorama
Refactored codes to support changing "defaults" which decides panoramas'
default parameters
1.31 : Size change is also supported
1.30 : Support changing panorama parameters after it is created
1.24 : Fixed a scroll variable becoming NaN issue when load event is fired later
1.23 : Added startPos parameter. You can specify relative value
to (imageWidth-canvasWidth). So you specify 1.0, you get
the 100% scrolled image
1.22 : Changed parameter names to reduce ambiguity
loopBounce -> bounce
loopBorderRate -> bounceEdge
loopBorderColor -> bounceEdgeColor
Refactored sample htmls. Made them being generated from parameters.
1.21 : Added {loop:false} option to support not-wrapped image with a nice
bounce effect
(due to a user request: thanks baloneysandwiches)
Split sample html pages into multiple files to show what it is clearly
in details
1.12 : Added autoscroll feature(minSpeed parameter)
Added interactive flag(interactive parameter)
Fixed image to canvas converting method. Now use $.after to properly handle
canvas insertion
1.11 : Fixed scroll popping bug
1.10 : Fixed event handling bug(mis typo?)
Support resized canvas drawing when height is specified
Fills the black color when canvas image is not loaded yet
Added .loaded parameter to event, users can draw something until the
panorama image is fully loaded
1.01 : Added event handling support
1.00 : Started ddpanorama
<Q & A>
Q. Why do you re-create already existing jQuery panorama plugin?
Yeah, it's another jQuery panorama plugin!
But the implementation details are quite different.
As the repo name implies, it internally changes image into html5 canvas.
Users can drag and view 360 degree panorama through the canvas.
Q. Why canvas? Aren't image with css and javascript sufficient?
Probably correct. I chose html5 canvas for two reasons:
1. If we draw things on canvas, we can do pretty cool stuffs with it like applying cool effects on it.
2. Drawing things on html5 canvas is fast enough on today's mobile device.
(I want this plugin get spread :D So I added the last but not least important notes)
*. It scrolls smoothly(maybe smoother than others)
*. It scrolls like iOS scrollview
Q. So what's the jQuery plugin name? jQuery-html5-canvas-panorama?
No, that's too long. Because it's jQuery plugin, it should start with "j".
But I prefer "dd", which means "dance dance". So the name is "ddpanorama"
Strange enough, but this is named after an amateur photograph's blog I love
I want to support that photos being displayed on the web
I'll create a series of tools and plugins to support Let's dance! :D
Q. What is jquery.ba-outside-events? Is it part of the plugin?
No, absolutely not. It's a prerequisite jQuery plugin which handles outside events ex) outside mouse release event
It's a simple and works good. The author's page is here(http://benalman.com/projects/jquery-outside-events-plugin/)
Maybe later it can be included in jQuery itself! Check the new version if you have a time.
I included "jquery.ba-outside-events.min.js" file in the repository which works currently with ddpanorama.