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
| .vdr {
| touch-action: none;
| position: absolute;
| box-sizing: border-box;
| border: 1px dashed #d6d6d6;
| }
| .handle {
| box-sizing: border-box;
| position: absolute;
| width: 8px;
| height: 8px;
| background: #ffffff;
| border: 1px solid #333;
| box-shadow: 0 0 2px #bbb;
| z-index: 1;
| }
| .handle-tl {
| top: -5px;
| left: -5px;
| cursor: nw-resize;
| }
| .handle-tm {
| top: -5px;
| left: calc(50% - 4px);
| /*margin-left: -5px;*/
| cursor: n-resize;
| }
| .handle-tr {
| top: -5px;
| right: -5px;
| cursor: ne-resize;
| }
| .handle-ml {
| top: calc(50% - 4px);
| /*margin-top: -5px;*/
| left: -5px;
| cursor: w-resize;
| }
| .handle-mr {
| top: calc(50% - 4px);
| /*margin-top: -5px;*/
| right: -5px;
| cursor: e-resize;
| }
| .handle-bl {
| bottom: -5px;
| left: -5px;
| cursor: sw-resize;
| }
| .handle-bm {
| bottom: -5px;
| left: calc(50% - 4px);
| /*margin-left: -5px;*/
| cursor: s-resize;
| }
| .handle-br {
| bottom: -5px;
| right: -5px;
| cursor: se-resize;
| }
| /*旋转handle*/
| /*.handle-rot {
| top: 0;
| left: 50%;
| margin-top: -20px;
| margin-left: -1px;
| border-radius: 50%;
| width: 10px;
| height: 10px;
| cursor: grab;
| transform: translate(-50%, 0);
| }
| .handle-rot:before {
| content: '';
| position: absolute;
| top: 8px;
| left: 50%;
| width: 0;
| height: 7px;
| border-left: 1px solid #000000;
| transform: translate(-50%, 0);
| }*/
| .ref-line{
| position: absolute;
| background-color: rgb(255, 0, 204);
| z-index: 9999;
| }
| .v-line{
| width: 1px;
| }
| .h-line{
| height: 1px;
| }
| @media only screen and (max-width: 768px) {
| [class*="handle-"]:before {
| content: '';
| left: -10px;
| right: -10px;
| bottom: -10px;
| top: -10px;
| position: absolute;
| }
| }
|
|
