├── .gitignore ├── README.md ├── babel.config.js ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── 001.jpg │ ├── app.css │ ├── font │ │ ├── demo.css │ │ ├── demo_index.html │ │ ├── iconfont.css │ │ ├── iconfont.eot │ │ ├── iconfont.js │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ ├── img.png │ └── logo.png ├── components │ └── Sketchpad.vue └── main.js └── vue.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | package-lock.json 8 | tests/**/coverage/ 9 | 10 | # Editor directories and files 11 | .idea 12 | .vscode 13 | *.suo 14 | *.ntvs* 15 | *.njsproj 16 | *.sln 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sketchpad 2 | 3 | >使用vue.js和fabric.js构建的web画板，目前支持画箭头、虚线、矩形、圆型、三角形、文字等功能 4 | 5 | [在线预览](https://blog.hjplay.cn/vue-sketchpad/) 6 | 7 | 效果图如下： 8 | !["效果图"](src/assets/img.png) 9 | 10 | 11 | - [x] 直线 12 | - [x] 箭头 13 | - [x] 虚线 14 | - [x] 输入文字 15 | - [x] 矩形 16 | - [x] 标准圆形 17 | - [x] 椭圆形 18 | - [x] 等腰三角形 19 | - [x] 删除、移动、复位 20 | - [x] 历史记录 21 | 22 | 2019-11-30更新 修复了回撤前进的bug、支持Retina屏 重新整理了下代码组织 23 | 24 | 2021-5-11 这是好久之前的练手代码啊😅 今天有点空就把脚手架升级一下 25 | 26 | ## Project setup 27 | ``` 28 | npm install 29 | ``` 30 | 31 | ### Compiles and hot-reloads for development 32 | ``` 33 | npm run serve 34 | ``` 35 | 36 | ### Compiles and minifies for production 37 | ``` 38 | npm run build 39 | ``` 40 | 41 | ### Customize configuration 42 | See [Configuration Reference](https://cli.vuejs.org/config/). 43 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sketchpad", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "fabric": "^4.4.0", 13 | "vue": "^2.6.11" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.5.0", 17 | "@vue/cli-plugin-eslint": "~4.5.0", 18 | "@vue/cli-service": "~4.5.0", 19 | "babel-eslint": "^10.1.0", 20 | "eslint": "^6.7.2", 21 | "eslint-plugin-vue": "^6.2.2", 22 | "vue-template-compiler": "^2.6.11", 23 | "sass": "1.26.8", 24 | "sass-loader": "8.0.2" 25 | }, 26 | "eslintConfig": { 27 | "root": true, 28 | "env": { 29 | "node": true 30 | }, 31 | "extends": [ 32 | "plugin:vue/essential", 33 | "eslint:recommended" 34 | ], 35 | "parserOptions": { 36 | "parser": "babel-eslint" 37 | }, 38 | "rules": {} 39 | }, 40 | "browserslist": [ 41 | "> 1%", 42 | "last 2 versions", 43 | "not dead" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HWcool/vue-sketchpad/1336f671ad2a9ed1e88d23bbd060e5f1ef009461/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | -------------------------------------------------------------------------------- /src/assets/001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HWcool/vue-sketchpad/1336f671ad2a9ed1e88d23bbd060e5f1ef009461/src/assets/001.jpg -------------------------------------------------------------------------------- /src/assets/app.css: -------------------------------------------------------------------------------- 1 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 2 | body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 3 | h1, h2, h3, h4, h5, h6{ font-size:100%; } 4 | address, cite, dfn, em, var { font-style:normal; } 5 | code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 6 | small{ font-size:12px; } 7 | ul, ol { list-style:none; } 8 | a { text-decoration:none; } 9 | a:hover { text-decoration:underline; } 10 | sup { vertical-align:text-top; } 11 | sub{ vertical-align:text-bottom; } 12 | legend { color:#000; } 13 | fieldset, img { border:0; } 14 | button, input, select, textarea { font-size:100%; } 15 | table { border-collapse:collapse; border-spacing:0; } -------------------------------------------------------------------------------- /src/assets/font/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时，垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | -------------------------------------------------------------------------------- /src/assets/font/demo_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IconFont Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

19 |
20 | 25 | 26 | 查看项目 27 | 28 |
29 |
30 |
31 |
    32 | 33 |
  • 34 | 35 |
    减
    36 |
    &#xe600;
    37 |
    • 38 | 39 |
  • 40 | 41 |
    date
    42 |
    &#xe697;
    43 |
    • 44 | 45 |
  • 46 | 47 |
    向前一步
    48 |
    &#xe67f;
    49 |
    • 50 | 51 |
  • 52 | 53 |
    圆形未选中
    54 |
    &#xe72f;
    55 |
    • 56 | 57 |
  • 58 | 59 |
    LC_icon_list_line_23
    60 |
    &#xe684;
    61 |
    • 62 | 63 |
  • 64 | 65 |
    单箭头直线
    66 |
    &#xe61c;
    67 |
    • 68 | 69 |
  • 70 | 71 |
    直线
    72 |
    &#xe653;
    73 |
    • 74 | 75 |
  • 76 | 77 |
    list
    78 |
    &#xe677;
    79 |
    • 80 | 81 |
  • 82 | 83 |
    eglass-check
    84 |
    &#xe618;
    85 |
    • 86 | 87 |
  • 88 | 89 |
    remove
    90 |
    &#xe60c;
    91 |
    • 92 | 93 |
  • 94 | 95 |
    84-虚线
    96 |
    &#xe641;
    97 |
    • 98 | 99 |
  • 100 | 101 |
    得分
    102 |
    &#xe61b;
    103 |
    • 104 | 105 |
  • 106 | 107 |
    move
    108 |
    &#xe607;
    109 |
    • 110 | 111 |
  • 112 | 113 |
    铅笔_pencil86
    114 |
    &#xe601;
    115 |
    • 116 | 117 |
  • 118 | 119 |
    回退
    120 |
    &#xe79a;
    121 |
    • 122 | 123 |
  • 124 | 125 |
    循环2
    126 |
    &#xe612;
    127 |
    • 128 | 129 |
  • 130 | 131 |
    形状-三角形
    132 |
    &#xeb99;
    133 |
    • 134 | 135 |
  • 136 | 137 |
    字体大小
    138 |
    &#xe7a0;
    139 |
    • 140 | 141 |
  • 142 | 143 |
    评论
    144 |
    &#xe63a;
    145 |
    • 146 | 147 |
  • 148 | 149 |
    错误
    150 |
    &#xe603;
    151 |
    • 152 | 153 |
  • 154 | 155 |
    plus
    156 |
    &#xe606;
    157 |
    • 158 | 159 |
  • 160 | 161 |
    对勾
    162 |
    &#xe63e;
    163 |
    • 164 | 165 |
  • 166 | 167 |
    半对
    168 |
    &#xe640;
    169 |
    • 170 | 171 |
  • 172 | 173 |
    错误 关闭-01
    174 |
    &#xe61d;
    175 |
    • 176 | 177 |
  • 178 | 179 |
    钱
    180 |
    &#xe605;
    181 |
    • 182 | 183 |
  • 184 | 185 |
    icon_发布时间
    186 |
    &#xe6ba;
    187 |
    • 188 | 189 |
  • 190 | 191 |
    矩形
    192 |
    &#xe790;
    193 |
    • 194 | 195 |
  • 196 | 197 |
    椭圆形
    198 |
    &#xe791;
    199 |
    • 200 | 201 |
202 |
203 |

Unicode 引用

204 |
205 | 206 |

Unicode 是字体在网页端最原始的应用方式，特点是：

207 |
    208 |
  • 兼容性最好，支持 IE6+，及所有现代浏览器。
    • 209 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 210 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 211 |
212 |
213 |

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

214 |
215 |

Unicode 使用步骤如下：

216 |

第一步：拷贝项目下面生成的 @font-face

217 | 
@font-face {
219 |   font-family: 'iconfont';
220 |   src: url('iconfont.eot');
221 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
222 |       url('iconfont.woff2') format('woff2'),
223 |       url('iconfont.woff') format('woff'),
224 |       url('iconfont.ttf') format('truetype'),
225 |       url('iconfont.svg#iconfont') format('svg');
226 | }
227 |
228 |

第二步：定义使用 iconfont 的样式

229 | 
.iconfont {
231 |   font-family: "iconfont" !important;
232 |   font-size: 16px;
233 |   font-style: normal;
234 |   -webkit-font-smoothing: antialiased;
235 |   -moz-osx-font-smoothing: grayscale;
236 | }
237 |
238 |

第三步：挑选相应图标并获取字体编码，应用于页面

239 | 
240 | <span class="iconfont">&#x33;</span>
242 |
243 |
244 |

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

245 |
246 |
247 |
248 |
249 |
    250 | 251 |
  • 252 | 253 |
    254 | 减 255 |
    256 |
    .icon-jian 257 |
    258 |
    • 259 | 260 |
  • 261 | 262 |
    263 | date 264 |
    265 |
    .icon-date 266 |
    267 |
    • 268 | 269 |
  • 270 | 271 |
    272 | 向前一步 273 |
    274 |
    .icon-xiangqianyibu 275 |
    276 |
    • 277 | 278 |
  • 279 | 280 |
    281 | 圆形未选中 282 |
    283 |
    .icon-yuanxingweixuanzhong 284 |
    285 |
    • 286 | 287 |
  • 288 | 289 |
    290 | LC_icon_list_line_23 291 |
    292 |
    .icon-square 293 |
    294 |
    • 295 | 296 |
  • 297 | 298 |
    299 | 单箭头直线 300 |
    301 |
    .icon-one-line-arrow 302 |
    303 |
    • 304 | 305 |
  • 306 | 307 |
    308 | 直线 309 |
    310 |
    .icon-line 311 |
    312 |
    • 313 | 314 |
  • 315 | 316 |
    317 | list 318 |
    319 |
    .icon-list 320 |
    321 |
    • 322 | 323 |
  • 324 | 325 |
    326 | eglass-check 327 |
    328 |
    .icon-check 329 |
    330 |
    • 331 | 332 |
  • 333 | 334 |
    335 | remove 336 |
    337 |
    .icon-remove 338 |
    339 |
    • 340 | 341 |
  • 342 | 343 |
    344 | 84-虚线 345 |
    346 |
    .icon--xuxian 347 |
    348 |
    • 349 | 350 |
  • 351 | 352 |
    353 | 得分 354 |
    355 |
    .icon-defen 356 |
    357 |
    • 358 | 359 |
  • 360 | 361 |
    362 | move 363 |
    364 |
    .icon-move 365 |
    366 |
    • 367 | 368 |
  • 369 | 370 |
    371 | 铅笔_pencil86 372 |
    373 |
    .icon-qianbipencil86 374 |
    375 |
    • 376 | 377 |
  • 378 | 379 |
    380 | 回退 381 |
    382 |
    .icon-huitui 383 |
    384 |
    • 385 | 386 |
  • 387 | 388 |
    389 | 循环2 390 |
    391 |
    .icon-xunhuan 392 |
    393 |
    • 394 | 395 |
  • 396 | 397 |
    398 | 形状-三角形 399 |
    400 |
    .icon-xingzhuang-sanjiaoxing 401 |
    402 |
    • 403 | 404 |
  • 405 | 406 |
    407 | 字体大小 408 |
    409 |
    .icon-zitidaxiao 410 |
    411 |
    • 412 | 413 |
  • 414 | 415 |
    416 | 评论 417 |
    418 |
    .icon-pinglun 419 |
    420 |
    • 421 | 422 |
  • 423 | 424 |
    425 | 错误 426 |
    427 |
    .icon-cuowu 428 |
    429 |
    • 430 | 431 |
  • 432 | 433 |
    434 | plus 435 |
    436 |
    .icon-xinzeng 437 |
    438 |
    • 439 | 440 |
  • 441 | 442 |
    443 | 对勾 444 |
    445 |
    .icon-duigou1 446 |
    447 |
    • 448 | 449 |
  • 450 | 451 |
    452 | 半对 453 |
    454 |
    .icon-bandui 455 |
    456 |
    • 457 | 458 |
  • 459 | 460 |
    461 | 错误 关闭-01 462 |
    463 |
    .icon-close 464 |
    465 |
    • 466 | 467 |
  • 468 | 469 |
    470 | 钱 471 |
    472 |
    .icon-tubiaozhizuo- 473 |
    474 |
    • 475 | 476 |
  • 477 | 478 |
    479 | icon_发布时间 480 |
    481 |
    .icon-icon_fabushijian 482 |
    483 |
    • 484 | 485 |
  • 486 | 487 |
    488 | 矩形 489 |
    490 |
    .icon-juxing 491 |
    492 |
    • 493 | 494 |
  • 495 | 496 |
    497 | 椭圆形 498 |
    499 |
    .icon-tuoyuanxing 500 |
    501 |
    • 502 | 503 |
504 |
505 |

font-class 引用

506 |
507 | 508 |

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

509 |

与 Unicode 使用方式相比，具有如下特点：

510 |
    511 |
  • 兼容性良好，支持 IE8+，及所有现代浏览器。
    • 512 |
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • 513 |
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • 514 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 515 |
516 |

使用步骤如下：

517 |

第一步：引入项目下面生成的 fontclass 代码：

518 | 
<link rel="stylesheet" href="./iconfont.css">
519 |
520 |

第二步：挑选相应图标并获取类名，应用于页面：

521 | 
<span class="iconfont icon-xxx"></span>
522 |
523 |
524 |

" 525 | iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

526 |
527 |
528 |
529 |
530 |
    531 | 532 |
  • 533 | 536 |
    减
    537 |
    #icon-jian
    538 |
    • 539 | 540 |
  • 541 | 544 |
    date
    545 |
    #icon-date
    546 |
    • 547 | 548 |
  • 549 | 552 |
    向前一步
    553 |
    #icon-xiangqianyibu
    554 |
    • 555 | 556 |
  • 557 | 560 |
    圆形未选中
    561 |
    #icon-yuanxingweixuanzhong
    562 |
    • 563 | 564 |
  • 565 | 568 |
    LC_icon_list_line_23
    569 |
    #icon-square
    570 |
    • 571 | 572 |
  • 573 | 576 |
    单箭头直线
    577 |
    #icon-one-line-arrow
    578 |
    • 579 | 580 |
  • 581 | 584 |
    直线
    585 |
    #icon-line
    586 |
    • 587 | 588 |
  • 589 | 592 |
    list
    593 |
    #icon-list
    594 |
    • 595 | 596 |
  • 597 | 600 |
    eglass-check
    601 |
    #icon-check
    602 |
    • 603 | 604 |
  • 605 | 608 |
    remove
    609 |
    #icon-remove
    610 |
    • 611 | 612 |
  • 613 | 616 |
    84-虚线
    617 |
    #icon--xuxian
    618 |
    • 619 | 620 |
  • 621 | 624 |
    得分
    625 |
    #icon-defen
    626 |
    • 627 | 628 |
  • 629 | 632 |
    move
    633 |
    #icon-move
    634 |
    • 635 | 636 |
  • 637 | 640 |
    铅笔_pencil86
    641 |
    #icon-qianbipencil86
    642 |
    • 643 | 644 |
  • 645 | 648 |
    回退
    649 |
    #icon-huitui
    650 |
    • 651 | 652 |
  • 653 | 656 |
    循环2
    657 |
    #icon-xunhuan
    658 |
    • 659 | 660 |
  • 661 | 664 |
    形状-三角形
    665 |
    #icon-xingzhuang-sanjiaoxing
    666 |
    • 667 | 668 |
  • 669 | 672 |
    字体大小
    673 |
    #icon-zitidaxiao
    674 |
    • 675 | 676 |
  • 677 | 680 |
    评论
    681 |
    #icon-pinglun
    682 |
    • 683 | 684 |
  • 685 | 688 |
    错误
    689 |
    #icon-cuowu
    690 |
    • 691 | 692 |
  • 693 | 696 |
    plus
    697 |
    #icon-xinzeng
    698 |
    • 699 | 700 |
  • 701 | 704 |
    对勾
    705 |
    #icon-duigou1
    706 |
    • 707 | 708 |
  • 709 | 712 |
    半对
    713 |
    #icon-bandui
    714 |
    • 715 | 716 |
  • 717 | 720 |
    错误 关闭-01
    721 |
    #icon-close
    722 |
    • 723 | 724 |
  • 725 | 728 |
    钱
    729 |
    #icon-tubiaozhizuo-
    730 |
    • 731 | 732 |
  • 733 | 736 |
    icon_发布时间
    737 |
    #icon-icon_fabushijian
    738 |
    • 739 | 740 |
  • 741 | 744 |
    矩形
    745 |
    #icon-juxing
    746 |
    • 747 | 748 |
  • 749 | 752 |
    椭圆形
    753 |
    #icon-tuoyuanxing
    754 |
    • 755 | 756 |
757 |
758 |

Symbol 引用

759 |
760 | 761 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 762 | 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

763 |
    764 |
  • 支持多色图标了，不再受单色限制。
    • 765 |
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • 766 |
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • 767 |
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • 768 |
769 |

使用步骤如下：

770 |

第一步：引入项目下面生成的 symbol 代码：

771 | 
<script src="./iconfont.js"></script>
772 |
773 |

第二步：加入通用 CSS 代码（引入一次就行）：

774 | 
<style>
775 | .icon {
776 |   width: 1em;
777 |   height: 1em;
778 |   vertical-align: -0.15em;
779 |   fill: currentColor;
780 |   overflow: hidden;
781 | }
782 | </style>
783 |
784 |

第三步：挑选相应图标并获取类名，应用于页面：

785 | 
<svg class="icon" aria-hidden="true">
786 |   <use xlink:href="#icon-xxx"></use>
787 | </svg>
788 |
789 |
790 |
791 | 792 |
793 |
794 | 813 | 814 | 815 | -------------------------------------------------------------------------------- /src/assets/font/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1552032900144'); /* IE9 */ 3 | src: url('iconfont.eot?t=1552032900144#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), 5 | url('iconfont.woff?t=1552032900144') format('woff'), 6 | url('iconfont.ttf?t=1552032900144') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1552032900144#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-jian:before { 19 | content: "\e600"; 20 | } 21 | 22 | .icon-date:before { 23 | content: "\e697"; 24 | } 25 | 26 | .icon-xiangqian:before { 27 | content: "\e67f"; 28 | } 29 | 30 | .icon-yuanxing:before { 31 | content: "\e72f"; 32 | } 33 | 34 | .icon-square:before { 35 | content: "\e684"; 36 | } 37 | 38 | .icon-arrow:before { 39 | content: "\e61c"; 40 | } 41 | 42 | .icon-line:before { 43 | content: "\e653"; 44 | } 45 | 46 | .icon-list:before { 47 | content: "\e677"; 48 | } 49 | 50 | .icon-check:before { 51 | content: "\e618"; 52 | } 53 | 54 | .icon-remove:before { 55 | content: "\e60c"; 56 | } 57 | 58 | .icon-xuxian:before { 59 | content: "\e641"; 60 | } 61 | 62 | .icon-defen:before { 63 | content: "\e61b"; 64 | } 65 | 66 | .icon-pencil:before { 67 | content: "\e601"; 68 | } 69 | 70 | .icon-huitui:before { 71 | content: "\e79a"; 72 | } 73 | 74 | .icon-reset:before { 75 | content: "\e612"; 76 | } 77 | 78 | .icon-sanjiaoxing:before { 79 | content: "\eb99"; 80 | } 81 | 82 | .icon-ziti:before { 83 | content: "\e7a0"; 84 | } 85 | 86 | .icon-pinglun:before { 87 | content: "\e63a"; 88 | } 89 | 90 | .icon-cuowu:before { 91 | content: "\e603"; 92 | } 93 | 94 | .icon-xinzeng:before { 95 | content: "\e606"; 96 | } 97 | 98 | .icon-duigou1:before { 99 | content: "\e63e"; 100 | } 101 | 102 | .icon-bandui:before { 103 | content: "\e640"; 104 | } 105 | 106 | .icon-close:before { 107 | content: "\e61d"; 108 | } 109 | 110 | .icon-tubiaozhizuo-:before { 111 | content: "\e605"; 112 | } 113 | 114 | .icon-icon_fabushijian:before { 115 | content: "\e6ba"; 116 | } 117 | 118 | .icon-juxing:before { 119 | content: "\e790"; 120 | } 121 | 122 | .icon-tuoyuanxing:before { 123 | content: "\e791"; 124 | } 125 | 126 | .icon-move:before { 127 | content: "\e607"; 128 | } 129 | -------------------------------------------------------------------------------- /src/assets/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HWcool/vue-sketchpad/1336f671ad2a9ed1e88d23bbd060e5f1ef009461/src/assets/font/iconfont.eot -------------------------------------------------------------------------------- /src/assets/font/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(h){var c,e='',l=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss");if(l&&!h.__iconfont__svg__cssinject__){h.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}!function(c){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(c,0);else{var l=function(){document.removeEventListener("DOMContentLoaded",l,!1),c()};document.addEventListener("DOMContentLoaded",l,!1)}else document.attachEvent&&(t=c,a=h.document,o=!1,i=function(){o||(o=!0,t())},(e=function(){try{a.documentElement.doScroll("left")}catch(c){return void setTimeout(e,50)}i()})(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,i())});var t,a,o,i,e}(function(){var c,l,t,a,o,i;(c=document.createElement("div")).innerHTML=e,e=null,(l=c.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",t=l,(a=document.body).firstChild?(o=t,(i=a.firstChild).parentNode.insertBefore(o,i)):a.appendChild(t))})}(window); -------------------------------------------------------------------------------- /src/assets/font/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 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 | -------------------------------------------------------------------------------- /src/assets/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HWcool/vue-sketchpad/1336f671ad2a9ed1e88d23bbd060e5f1ef009461/src/assets/font/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HWcool/vue-sketchpad/1336f671ad2a9ed1e88d23bbd060e5f1ef009461/src/assets/font/iconfont.woff -------------------------------------------------------------------------------- /src/assets/font/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HWcool/vue-sketchpad/1336f671ad2a9ed1e88d23bbd060e5f1ef009461/src/assets/font/iconfont.woff2 -------------------------------------------------------------------------------- /src/assets/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HWcool/vue-sketchpad/1336f671ad2a9ed1e88d23bbd060e5f1ef009461/src/assets/img.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HWcool/vue-sketchpad/1336f671ad2a9ed1e88d23bbd060e5f1ef009461/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/Sketchpad.vue: -------------------------------------------------------------------------------- 1 | 20 | 417 | 418 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import './assets/app.css' 4 | import './assets/font/iconfont.css' 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | render: h => h(App), 9 | }).$mount('#app') 10 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: './', 3 | assetsDir: 'static', 4 | outputDir: 'dist', 5 | } --------------------------------------------------------------------------------