calliphers.js
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
|
define(
function
(){
var
callipers = {};
var
spaceWidth = 7;
// 间隔
var
height = 50;
// 默认高度
var
callipersHtml =
"<div class='swiper-container'> "
+
" <div class='swiper-wrapper'> "
+
" <div class='swiper-slide'> "
+
" <div class='callipers-content'></div>"
+
" </div> "
+
" </div> "
+
"</div> "
+
"<canvas></canvas> "
;
// 获取数字长度
function
getNumberLength(number){
var
str =
""
+number;
return
str.length;
}
function
createImage(container,width,height,minValue,maxValue){
var
containerWidth = $(container).width();
var
c=$(container).find(
"canvas"
)[0];
var
ctx=c.getContext(
"2d"
);
var
multiplyingPower=2;
c.width=width*multiplyingPower;
c.height=height*multiplyingPower;
ctx.strokeStyle=
"#36384d"
;
ctx.lineWidth=1*multiplyingPower;
// 绘制底部线条
ctx.beginPath();
ctx.moveTo(containerWidth/2*multiplyingPower,height*multiplyingPower);
ctx.lineTo(width*multiplyingPower-containerWidth/2*multiplyingPower,height*multiplyingPower);
ctx.stroke();
// 绘制
for
(
var
i=minValue;i<=maxValue;i++){
var
newIndex = spaceWidth*(i-minValue)+containerWidth/2;
ctx.moveTo(newIndex*multiplyingPower,50*multiplyingPower);
if
(i==minValue){
ctx.fillStyle=
"#959AB9"
;
ctx.font=
"24px Arial "
;
ctx.fillText(i,(newIndex-3)*multiplyingPower,28*multiplyingPower);
ctx.lineTo(newIndex*multiplyingPower,35*multiplyingPower);
}
else
if
(i%10==0){
// 绘制长线
ctx.font=
"24px Arial"
;
ctx.fillText(i,(newIndex-6*(getNumberLength(i)-1))*multiplyingPower,28*multiplyingPower);
ctx.lineTo(newIndex*multiplyingPower,35*multiplyingPower);
}
else
{
//绘制短线
ctx.lineTo(newIndex*multiplyingPower,43*multiplyingPower);
}
ctx.stroke();
}
var
imageDataUrl = c.toDataURL();
$(container).find(
"canvas"
).remove();
// 删除canvas
return
imageDataUrl;
}
function
resetSwiperTransition(swiper){
var
translate = swiper.getWrapperTranslate();
var
offset = translate%spaceWidth;
offset = offset*-1;
if
(offset>spaceWidth/2){
translate = (parseInt(translate/spaceWidth)-1)*spaceWidth;
}
else
{
translate = (parseInt(translate/spaceWidth))*spaceWidth;
}
swiper.setWrapperTranslate(translate);
var
offsetValue = translate/spaceWidth*-1;
return
offsetValue;
}
function
render(container,settings){
settings = settings||{};
var
minValue = settings.min||0;
var
maxValue = settings.max||200;
var
progressCallback = settings.progressCallback||
function
(){};
var
transitionEndCallback = settings.transitionEndCallback||
function
(){};
var
initValue = settings.initValue||parseInt((maxValue-minValue)/2+minValue);
var
containerWidth= $(container).width();
var
width = spaceWidth*(maxValue-minValue)+containerWidth;
$(container).html(callipersHtml);
container.attr(
"data-min"
,minValue);
container.attr(
"data-max"
,maxValue);
var
dataURL = createImage(container,width,height,minValue,maxValue);
$(container).find(
".callipers-content"
).css({
"background-image"
:
"url("
+ dataURL+
")"
,
"width"
:width+
"px"
});
setTimeout(
function
(){
$(container).find(
".swiper-container"
).swiper({
runCallbacksOnInit:
false
,
freeModeMomentumRatio:0.2,
touchRatio:0.5,
slidesPerView:
"auto"
,
resistanceRatio: 0,
freeMode:
true
,
onInit:
function
(swiper){
var
value = resetSwiperTransition(swiper)+minValue;
var
offset = (initValue-minValue)*spaceWidth*-1;
swiper.setWrapperTranslate(offset);
container.attr(
"data-value"
,initValue);
swiper.updateProgress();
container.addClass(
"initialized"
);
},
onTouchEnd:
function
(swiper){
var
value = resetSwiperTransition(swiper)+minValue;
transitionEndCallback(value);
container.attr(
"data-value"
,value);
},
onTransitionEnd:
function
(swiper){
var
value = resetSwiperTransition(swiper)+minValue;
transitionEndCallback(value);
container.attr(
"data-value"
,value);
},
onProgress:
function
(swiper,progress){
var
value = parseInt(swiper.getWrapperTranslate()/spaceWidth)*-1+minValue;
progressCallback(value);
container.attr(
"data-value"
,value);
}
});
},100);
// init swiper
}
// 初始化 标尺
function
init(settings){
var
container = settings.container;
$(container).each(
function
(){
render($(
this
),settings);
});
}
callipers.init = init;
return
callipers;
});
|
calliphers.css
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
|
.callipers{
position
:
relative
;opacity:
0
;}
.callipers.initialized{
opacity:
1
;
}
.callipers canvas{
display
:
none
;}
.callipers:before{
content
:
""
;
position
:
absolute
;
left
:
0
;
bottom
:
0
;
right
:
0
;
width
:
1px
;
height
:
47px
;
background-color
:
#b540a8
;
margin
:
auto
;
z-index
:
99
;
}
.callipers .callipers-content{
height
:
50px
;
background
:
no-repeat
center
center
;
background-
size
:contain;
}
.callipers .swiper-container{
padding
:
0
;}
.callipers .swiper-container .swiper-wrapper{
height
:
auto
;}
.callipers .swiper-container .swiper-slide{
width
:
auto
;
height
:
auto
;}
|
test.html
1
2
3
4
5
6
7
|
<
div
class
=
"page-group"
>
<
div
class
=
"page"
id
=
"register-base-height"
>
<
div
class
=
"content"
>
<
div
class
=
"callipers "
></
div
>
</
div
>
<!-- content -->
</
div
>
<!-- page -->
</
div
>
<!-- page-group -->
|
test.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
define([
"callipers"
],
function
(callipers) {
$(document).on(
"pageInit"
,
"#test"
,
function
(e, pageId, $page) {
callipers.init({
container:$page.find(
".callipers"
),
min:20,
max:220,
initValue:90,
progressCallback:
function
(value){
console.log(
"value"
);
},
transitionEndCallback:
function
(value){
console.log(
"value"
);
}
});
});
$.init();
});
|
本文转自 antlove 51CTO博客,原文链接:http://blog.51cto.com/antlove/1923932