-
Notifications
You must be signed in to change notification settings - Fork 1
/
print.html
162 lines (148 loc) · 4.13 KB
/
print.html
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
156
157
158
159
160
161
162
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html,
body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="FunctionPrinter.min.js" type="text/javascript" charset="utf-8"></script>
<div id="parent" style="width:100%;height:100%;pointer-events:all;">
<canvas id="cvs" width="800" height="800"></canvas>
</div>
<script type="text/javascript">
document.querySelector('#cvs').width = document.querySelector('#cvs').parentElement.offsetWidth
document.querySelector('#cvs').height = document.querySelector('#cvs').parentElement.offsetHeight
const fcp = new FunctionPrinter(document.querySelector("#cvs"), {
events: ['draw', 'zoom', 'showtip'],
mark: {
x: { // 针对于x轴，如果是y轴则为y 参数保持一致
line: {
accuracy: 30, // 每一个刻度之间相隔的距离 (单位:px)
lineWidth: 1, // 标注刻度的粗细
width: 10, // 对于x轴来说即标注刻度线段的高度，对于y来说则为宽度
color: 'black' // 刻度颜色 这个颜色可以是rgba或者十六进制颜色或者是canvas颜 色渐变类
},
font: {
size: 14,
weight: 1,
color:'#303133',
weight:1.2
},
accuracy: 1
},
y: { // 针对于x轴，如果是y轴则为y 参数保持一致
line: {
accuracy: 30, // 每一个刻度之间相隔的距离 (单位:px)
lineWidth: 1, // 标注刻度的粗细
width: 10, // 对于x轴来说即标注刻度线段的高度，对于y来说则为宽度
color: 'black' // 刻度颜色 这个颜色可以是rgba或者十六进制颜色或者是canvas颜 色渐变类
},
font: {
size: 14,
weight: 1,
color:'#303133',
weight:1.2
},
accuracy: 1
}
},
zoom: { // 缩放控制参数
max: 50, // 缩小程度最低值 d- 0
min: 10, // 放大程度最大值 d- 0
accuracy: 10 // 每次缩放增加或减少的步长
},
points: {
size: 3,
solid: 0
},
axis:{ // 轴样式配置和mark参数一样，有x和y两个参数
x:{ // x轴样式
color: 'black', // 轴线段的颜色 d- '#000000'
lineWidth: 1.2 // 轴线段的粗细 d- 1.5
},
y:{ // y轴样式
color: 'black', // 轴线段的颜色 d- '#000000'
lineWidth: 1.2 // 轴线段的粗细 d- 1.5
}
},
tipline: { // 轴线标识参数
color: 'auto', // 线段颜色,可以指定颜色也可以选择auto自适应颜色 d- auto
type: 'dotted', // 线段的种类。目前提供的有两种分别是 dotted：虚线 chain：点划线。也可以自定义配置见下文说明 d- [4,2]
width: 3, // 线段粗细 d- 3
animate: 1 // 是否开启动画 d- false
},
accuracy: 0.1,
backgroundColor:'#f3f4f6',
samePointTimeOut:1800 // 相同点延时时间切换
})
fcp.DrawFunction('y=2x+3', (x) => {
return 2 * x + 2
}, -1, '#fa3534', null, 1, (x, y) => {
// console.log(x)
if (Number.isInteger(x)) {
return true
}
}, (key, color, x, y) => {
return {
key: key,
x,
y,
color
}
})
fcp.DrawFunction('y=5^x', function(x) {
return Math.pow(0.2,x)
}, 'queue', '#ff9900', null, 1, (x, y) => {
if (Number.isInteger(x)) {
return true
}
}, (key, color, x, y) => {
return {
key,
x,
y,
color
}
})
fcp.DrawFunction('y=-2x^2+3x+10', (x) => {
return -2 * x * x + 3 * x + 10
}, 'middle', '#19be6b', null, 1, (x, y) => {
if (Number.isInteger(x)) {
return true
}
}, (key, color, x, y) => {
return {
key: key,
x,
y,
color
}
})
fcp.DrawFunction('y=log(x)', function(x) {
return Math.log(x)
}, 'queue', '#2b85e4', null, 1, (x, y) => {
if (Number.isInteger(x)) {
return true
}
}, (key, color, x, y) => {
return {
key,
x,
y,
color
}
})
</script>
</body>
</html>