【代码众筹】汉字学习助手

xy506 18天前 359

        儿子上小学二年级了,经常有不会写的字问我,手机上有一款软件叫笔顺笔画大全,很好用,电脑上有一个一份爱小工具也很好用,但是电脑没网的话也用不了,所以就想写一个PC版的,于是使用手机软件笔顺笔画大全的界面拼凑了以下,界面如下,然后使用PS切片后生成了一个HTML页面,使用aardio可以将html打包为一个独立软件,但是个人能力有限,现进行代码众筹,本人收集到的相关资源如下:

1、界面截图

2、PS切片HTML页面

3、笔顺笔画svg资源js文件

有大佬一起编写么。

PS:笔顺笔画svg资源来源于[Make Me A Hanzi]项目,加速地址:https://gitee.com/xy506/makemeahanzi

上传的附件:
最新回复 (6)
  • 光庆 18天前
    0 2

    import win.ui;
    /*DSG{{*/
    var winform = win.form(text="aardio form";right=303;bottom=367)
    winform.add(
    button={cls="button";text="Button";left=104;top=304;right=192;bottom=360;z=2};
    plus={cls="plus";left=8;top=8;right=296;bottom=288;edge=1;foreRepeat="scale";z=1}
    )
    /*}}*/
    winform.show();
    import web.json;
    winform.button.oncommand = function(id,event){
    	var 被 = `["M 296 737 Q 323 712 351 681 Q 366 666 383 666 Q 395 666 400 681 Q 406 697 398 730 Q 392 751 360 767 Q 287 798 268 791 Q 262 787 264 773 Q 267 760 296 737 Z", "M 267 360 Q 357 504 393 534 Q 409 547 396 562 Q 374 578 344 587 Q 320 596 303 583 Q 222 525 86 518 Q 73 519 71 512 Q 68 502 83 491 Q 122 466 139 468 Q 142 469 273 516 Q 288 520 291 514 Q 297 507 287 485 Q 226 352 79 193 Q 64 180 68 176 Q 71 175 85 180 Q 157 220 243 326 L 267 360 Z", "M 243 326 Q 274 250 232 80 Q 222 38 251 -4 Q 252 -7 255 -9 Q 271 -24 282 1 Q 295 38 295 79 Q 299 248 306 286 Q 313 311 304 320 Q 274 356 267 360 C 245 380 233 354 243 326 Z", "M 375 353 Q 417 396 441 415 Q 453 421 448 428 Q 442 438 426 449 Q 410 459 394 458 Q 384 457 387 442 Q 391 432 356 360 C 343 333 354 332 375 353 Z", "M 356 360 Q 338 369 328 366 Q 324 365 325 355 Q 325 351 391 289 Q 400 279 411 280 Q 418 280 422 289 Q 425 299 420 319 Q 416 335 393 347 Q 384 351 375 353 L 356 360 Z", "M 678 567 Q 714 577 753 586 Q 786 590 788 577 Q 789 568 779 531 Q 772 516 779 513 Q 786 509 798 521 Q 859 563 884 570 Q 903 573 902 584 Q 901 596 828 630 Q 807 639 781 631 Q 726 615 681 600 L 631 588 Q 583 578 527 566 C 498 560 512 520 541 528 Q 547 529 555 532 Q 592 544 630 554 L 678 567 Z", "M 527 566 Q 484 587 471 584 Q 452 581 467 561 Q 503 501 477 310 Q 468 258 443 197 Q 419 139 339 57 Q 326 45 323 39 Q 322 32 332 33 Q 368 33 433 104 Q 493 171 517 276 Q 526 334 530 367 L 531 382 Q 535 439 538 509 Q 539 519 541 528 C 546 557 546 557 527 566 Z", "M 666 409 Q 672 491 678 567 L 681 600 Q 687 723 706 777 Q 710 789 690 804 Q 654 823 630 828 Q 614 832 606 823 Q 599 816 606 800 Q 630 766 629 741 Q 632 668 631 588 L 630 554 Q 629 479 623 397 C 621 367 664 379 666 409 Z", "M 710 200 Q 741 254 768 332 Q 780 360 799 380 Q 818 396 804 409 Q 791 421 759 432 Q 735 439 709 424 Q 690 417 666 409 L 623 397 Q 589 391 543 385 Q 534 385 531 382 C 503 376 503 376 530 367 Q 567 349 623 363 Q 680 382 690 383 Q 715 380 709 352 Q 696 286 672 237 L 653 201 Q 596 117 475 76 Q 462 70 474 63 Q 480 
    59 517 61 Q 608 70 684 160 L 710 200 Z", "M 684 160 Q 736 90 784 33 Q 799 15 823 15 Q 955 27 962 38 Q 966 44 956 48 Q 803 111 715 195 Q 712 198 710 200 L 672 237 Q 641 271 606 311 Q 596 326 580 327 Q 558 328 552 321 Q 551 317 557 312 Q 588 293 609 262 Q 631 231 653 201 L 684 160 Z"]`;
    	var strokes = web.json.parse(被);
    	import godking.paint;
    	var p = godking.paint(1024,1024/*高度*/,/*背景颜色*/,/*背景图像*/);
    	p.scale(1 /*宽度缩放比例*/,-1/*高度缩放比例*/,/*选项*/);
    	p.translate(0 /*水平偏移像素*/,-1024*7/8/*垂直偏移像素*/,/*选项*/);
    	for(i=1;#strokes;1){
    		var path = p.path( 1 /*0 交叉填充 1 全填充*/);
    		var x,y = 0,0;
    		var s = string.split(strokes[i]," ");
    		for(n=1;#s;1){
    			select(s[n]) {
    				case "M" {
    					x,y = tonumber(s[n+1]),tonumber(s[n+2]);
    				}
    				case "L" {
    					var x1,y1 = tonumber(s[n+1]),tonumber(s[n+2]);
    					path.addLine(x,y,x1,y1);
    					x,y = x1,y1;
    				}
    				case "Z" {
    					path.closeFigure();
    				}
    				case "Q" {
    					var cx,cy,x1,y1 =tonumber(s[n+1]),tonumber(s[n+2]),tonumber(s[n+3]),tonumber(s[n+4]);
    					path.addBezier(x,y,cx,cy,x1,y1,x1,y1);
    					x,y = x1,y1;
    				}
    				case "C" {
    					var cx1,cy1,cx2,cy2,x1,y1 =tonumber(s[n+1]),tonumber(s[n+2]),tonumber(s[n+3]),tonumber(s[n+4]),tonumber(s[n+5]),tonumber(s[n+6]);
    					path.addBezier(x,y,cx1,cy1,x1,y1,cx2,cy2);
    					x,y = x1,y1;
    				}
    			}
    		}
    		p.fillPath(path,0xFFFF0000/*填充颜色或brush对象*/);
    		path.delete();
    		winform.plus.foreground = p.getBuffer();
    		win.delay(500);
    	}
    	p.close();
    }
    win.loopMessage();


    或者不进行画布调整,而是直接计算坐标:


    import win.ui;
    /*DSG{{*/
    var winform = win.form(text="aardio form";right=303;bottom=367)
    winform.add(
    button={cls="button";text="Button";left=104;top=304;right=192;bottom=360;z=2};
    plus={cls="plus";left=8;top=8;right=296;bottom=288;edge=1;foreRepeat="scale";z=1}
    )
    /*}}*/
    
    winform.show();
    import web.json;
    winform.button.oncommand = function(id,event){
        var 被 = `["M 296 737 Q 323 712 351 681 Q 366 666 383 666 Q 395 666 400 681 Q 406 697 398 730 Q 392 751 360 767 Q 287 798 268 791 Q 262 787 264 773 Q 267 760 296 737 Z", "M 267 360 Q 357 504 393 534 Q 409 547 396 562 Q 374 578 344 587 Q 320 596 303 583 Q 222 525 86 518 Q 73 519 71 512 Q 68 502 83 491 Q 122 466 139 468 Q 142 469 273 516 Q 288 520 291 514 Q 297 507 287 485 Q 226 352 79 193 Q 64 180 68 176 Q 71 175 85 180 Q 157 220 243 326 L 267 360 Z", "M 243 326 Q 274 250 232 80 Q 222 38 251 -4 Q 252 -7 255 -9 Q 271 -24 282 1 Q 295 38 295 79 Q 299 248 306 286 Q 313 311 304 320 Q 274 356 267 360 C 245 380 233 354 243 326 Z", "M 375 353 Q 417 396 441 415 Q 453 421 448 428 Q 442 438 426 449 Q 410 459 394 458 Q 384 457 387 442 Q 391 432 356 360 C 343 333 354 332 375 353 Z", "M 356 360 Q 338 369 328 366 Q 324 365 325 355 Q 325 351 391 289 Q 400 279 411 280 Q 418 280 422 289 Q 425 299 420 319 Q 416 335 393 347 Q 384 351 375 353 L 356 360 Z", "M 678 567 Q 714 577 753 586 Q 786 590 788 577 Q 789 568 779 531 Q 772 516 779 513 Q 786 509 798 521 Q 859 563 884 570 Q 903 573 902 584 Q 901 596 828 630 Q 807 639 781 631 Q 726 615 681 600 L 631 588 Q 583 578 527 566 C 498 560 512 520 541 528 Q 547 529 555 532 Q 592 544 630 554 L 678 567 Z", "M 527 566 Q 484 587 471 584 Q 452 581 467 561 Q 503 501 477 310 Q 468 258 443 197 Q 419 139 339 57 Q 326 45 323 39 Q 322 32 332 33 Q 368 33 433 104 Q 493 171 517 276 Q 526 334 530 367 L 531 382 Q 535 439 538 509 Q 539 519 541 528 C 546 557 546 557 527 566 Z", "M 666 409 Q 672 491 678 567 L 681 600 Q 687 723 706 777 Q 710 789 690 804 Q 654 823 630 828 Q 614 832 606 823 Q 599 816 606 800 Q 630 766 629 741 Q 632 668 631 588 L 630 554 Q 629 479 623 397 C 621 367 664 379 666 409 Z", "M 710 200 Q 741 254 768 332 Q 780 360 799 380 Q 818 396 804 409 Q 791 421 759 432 Q 735 439 709 424 Q 690 417 666 409 L 623 397 Q 589 391 543 385 Q 534 385 531 382 C 503 376 503 376 530 367 Q 567 349 623 363 Q 680 382 690 383 Q 715 380 709 352 Q 696 286 672 237 L 653 201 Q 596 117 475 76 Q 462 70 474 63 Q 480 
    59 517 61 Q 608 70 684 160 L 710 200 Z", "M 684 160 Q 736 90 784 33 Q 799 15 823 15 Q 955 27 962 38 Q 966 44 956 48 Q 803 111 715 195 Q 712 198 710 200 L 672 237 Q 641 271 606 311 Q 596 326 580 327 Q 558 328 552 321 Q 551 317 557 312 Q 588 293 609 262 Q 631 231 653 201 L 684 160 Z"]`;
        var strokes = web.json.parse(被);
        import godking.paint;
        var p= godking.paint(1024,1024/*高度*/,/*背景颜色*/,/*背景图像*/);
        for(i=1;#strokes;1){
            var path = p.path( 1 /*0 交叉填充 1 全填充*/);
            var x,y = 0,0;
            var s = string.split(strokes[i]," ");
            for(n=1;#s;1){
                select(s[n]) {
                    case "M" {
                        x,y = tonumber(s[n+1]),896-tonumber(s[n+2]); //896为在高1024的基础上,向上平移1/8,也就是1024*7/8=896,用来纠正文字底部越界
                    }
                    case "L" {
                        var x1,y1 = tonumber(s[n+1]),896-tonumber(s[n+2]);
                        path.addLine(x,y,x1,y1);
                        x,y = x1,y1;
                    }
                    case "Z" {
                        path.closeFigure();
                    }
                    case "Q" {
                        var cx,cy,x1,y1 =tonumber(s[n+1]),896-tonumber(s[n+2]),tonumber(s[n+3]),896-tonumber(s[n+4]);
                        path.addBezier(x,y,cx,cy,x1,y1,x1,y1);
                        x,y = x1,y1;
                    }
                    case "C" {
                        var cx1,cy1,cx2,cy2,x1,y1 =tonumber(s[n+1]),896-tonumber(s[n+2]),tonumber(s[n+3]),896-tonumber(s[n+4]),tonumber(s[n+5]),896-tonumber(s[n+6]);
                        path.addBezier(x,y,cx1,cy1,x1,y1,cx2,cy2);
                        x,y = x1,y1;
                    }
                }
            }
            p.fillPath(path,0xFFFF0000/*填充颜色或brush对象*/);
            path.delete();
            winform.plus.foreground = p.getBuffer();
            win.delay(500);
        }
        p.close();
    }
    win.loopMessage();
  • xy506 18天前
    0 3
    大佬牛掰!
  • zxl1969 16天前
    0 4
    大佬岀手,没有搞不定的
  • netfox 16天前
    0 5
    大佬威武
  • 红色森林 15天前
    0 6
    大佬牛掰!
  • Mr_MAO 10天前
    0 7

    大佬实现的非常牛掰~另外,我记得aardio作者制作的小工具《WubiLex-五笔输入法工具》不是开源了吗?里面有汉字笔画顺序演示的功能,楼主可以找源码学习一下!

返回