GameMale
登陆 / 注册 搜索

USERCENTER

SEARCHSITE

搜索

查看: 1526|回复: 43
收起左侧

[功能优化] [画猜脚本] 画只狼狼过七夕 - 修勾临摹工具

  [复制链接] |关注本帖

净化污秽的天照驯化红龙幼崽香喷喷的烤鸡小小安全帽驯化黑龙幼崽幽浮起司煲月影狼妙手空空

     楼主| GMagels 发表于 2024-8-10 21:00:11 | 显示全部楼层 |阅读模式 <
    本帖最后由 GMagels 于 2024-8-13 23:40 编辑

    各位晚上好,让我看看是谁七夕的大晚上在刷帖子,哦,我也是啊,那没事了...

    七夕寂静的夜晚,想要画一只狼狼,但是又没有那个画功,怎么办?

    没事,适配画猜界面的临摹辅助脚本-
    修图勾线临摹工具 ,简称修勾临摹工具来了!


    声明:脚本仅供画猜娱乐临摹学习之用,请尊重原作,临摹不等于原创,禁止用作商业用途。


    主要功能展示
    (功能演示中临摹的图是大佬@Cambrian 画的布莱泽)

    1.界面优化
    对画猜界面进行了优化,只保留了必要的元素 。
    -图标注释使用了u老师@user_login 空间的日志表态样式


    2.可设置画布背景
    提供可调整间距的网格线背景辅助,也可以使用本地或在线图片当作背景来临摹。
    背景不会加入画布,最后提交的内容只包含上层临摹纸上的笔画。
    由于画布是横向的,背景图片请选取横向画幅的图片效果更好,纵向画幅请先进行适当剪裁。

    网格线
    本地/在线背景
    3.画布放大&缩小
    可以使用鼠标滚轮向上放大或者向下缩小画布,进行更精细的操作。
    画布实际大小不变,相当于放大镜的效果,超出屏幕的部分请使用滚动条调整画布位置。
    -由于懒癌发作,这个功能代码主体采用了CSDN的示例代码
    【CSDN】js实现鼠标滚轮放大缩小页面指定区域(css3 scale)


    4.存档&读档
    一次画不完可以先保存图片存档,之后使用提供的读档功能读档之后继续。
    由于画猜未知机制,读档后直接使用画笔工具会清空画布。
    因此,脚本在读档后会自动切换为橡皮擦工具。
    请根据提示内容,读档后随便手动使用一次橡皮擦。(任意位置,不需要真的擦掉内容)
    固定好读取的存档,就可以继续画了!
    *虽然读档可以读取其他大小的非存档图片,但是显示可能不全请注意
    存档

    (右键另存为)

    读档

    5. 画布功能快捷键
    更快的工具切换!详细内容如下
    Ctrl+Z 撤销
    Ctrl+X 剪切
    Ctrl+C 复制
    Ctrl+A 切换为画笔
    Ctrl+S 切换为直线
    Ctrl+D 切换为橡皮擦

    6. 一键还原,显示临摹纸
    将画布大小还原为原大小,背景重设成网格背景,显示临摹纸的内容。
    画布遮挡提交和清空按钮时,点击这两个按钮不会生效。
    因此,请先点击还原按钮再点击提交!




    环境&兼容性
    环境:在PC Chrome浏览器 1920*1080 屏幕大小 环境下开发,其余环境未测试
    兼容:不兼容画猜成图上传脚本!
    不兼容原因:画猜成图脚本开启后,无论是否开启临摹工具,都会导致光标落点和画布落点有错位,因此不兼容。



    有了这个修勾临摹工具,期待坛友们在画猜区更好的发挥!祝各位七夕节快乐(逃

    此图为临摹结果,非瓦尼原创,临摹的原图是大佬@Cambrian 画的布莱泽


    更新记录

    V02 20240810 更新0.2版本
    感谢u老师@user_login 的建议,现在还原按钮会记忆最新加载的背景图。
    还原成网格图之后再次点击还原按钮,会还原最新加载的背景图。

    V03 20240813 更新0.3版本 代码贡献者:u老师@user_login
    本次0.3版本更新代码由u老师@user_login 提供,特此鸣谢!
    0.3版本支持直接通过读档按钮读入不同大小的图片(原版成图上传脚本的效果)。
    同时,0.3版本修正了读入图片后需要使用橡皮擦固定的bug,通过读档读入图片可直接继续画作,无需额外操作。
    更新的详细说明请查看这篇日志 -> 点我跳转

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?立即注册

    x

    评分

    参与人数 14血液 +34 追随 +14 堕落 +6 收起 理由
    Kogenta + 5 + 1
    星之子 + 3 + 1 + 1
    相见忧 + 5 + 1 + 1 赞一个!
    书の妖怪 + 1 很给力!
    岚狗 + 3 + 1
    Nittbone + 1 很给力!
    you9632587 + 5 + 1
    Freeze123 + 1
    bigbigbig3 + 5 + 1 + 1
    迷糊月牙魇 + 1

    查看全部评分

    回复

    使用道具 举报

      user_login 发表于 2024-8-10 21:58:22 | 显示全部楼层 <
      本帖最后由 user_login 于 2024-8-13 15:33 编辑

      好久之前是借助软件固定窗口+设置不透明来临摹的,这下方便那多了。
      · 还原那里能在还原后 再点一下来重新显示背景图继续临摹就更好了
      · 读档的功能改一下canvas的drawImage方法的完整参数根据图片大小和画布大小设置绘制的范围,就可以取代图片上传脚本了
      · 读档后还要擦一下那里 过会看看原本的画猜工具是怎么写的



      1.             reader.onload = function(event) {
      2.                 var img = new Image();
      3.                 img.src = event.target.result;
      4.                 img.onload = function(){
      5.                     //图片宽高和画布一致就直接画(是存档),不一致缩小后居中画(是传图)
      6.                     if(img.height==drawCanvas.height&&img.width==drawCanvas.width){
      7.                         drawCanvas.getContext("2d").drawImage( img, 0, 0);}
      8.                     else{
      9.                         //sc缩放倍率>=1;padding边距;dw缩放后的图片宽度...
      10.                         let sc = Math.max(img.width/drawCanvas.width,img.height/drawCanvas.height,1);
      11.                         let padding = sc==1?1:0.9;
      12.                         let dw = img.width/sc*padding;
      13.                         let dh = img.height/sc*padding;
      14.                         drawCanvas.getContext("2d").drawImage( img, (drawCanvas.width-dw)/2, (drawCanvas.height-dh)/2, dw, dh);}
      15.                     //使用原有的方法加入到历史画布数据的数组中 arr存储每个操作后的图片数据;obj画布。
      16.                     arr.push(obj.getImageData(0,0,drawCanvas.width,drawCanvas.height));

      17.                     //toolBox.querySelector('#draw .type .eraser').click();
      18.                     //showMsg("成功加载存档,已切换至橡皮擦工具,<span style='text-decoration: underline;'>擦一下任意位置以固定存档</span>", 5000);
      19.                 }
      20.             };
      复制代码


      评分

      参与人数 1追随 +1 收起 理由
      GMagels + 1 赞美u狼!!!!

      查看全部评分

        收起(3)
      回复

      举报

      漂洋小船冒险用指南针破损的旧书人鱼之泪雪王的心脏苏格兰圆脸胖鸡[Pro Max]丛林的鸟飞走了不曾寄出的信件幽灵竹筒『随时随地开启!』

        凯诺斯 发表于 2024-8-10 21:06:02 | 显示全部楼层 <
        回复

        举报

        打开一个礼物盒『搓粉团珠』人鱼之泪银色溜冰鞋『冰雕马拉橇』劫掠核芯御医神兔金牌矿工

          promax 发表于 2024-8-10 21:06:57 | 显示全部楼层 <
          回复

          举报

          永亘环小狮欢舞『搓粉团珠』黄粱一梦【新春限定】果体 隆死灵之书永远的克叔業火死鬥实现梦想官复原职

            娱乐法师火布偶 发表于 2024-8-10 21:16:05 | 显示全部楼层 <
            回复

            举报

            诺克史黛拉之月男用贞操带『眼榴』40x43 隐形➀16x43 隐形➀『落樱缤纷』40x43 隐形➁『不败之花』遗留之人的城堡

              lostorage 发表于 2024-8-10 21:25:13 | 显示全部楼层 <
              回复

              举报

              永亘环『搓粉团珠』骑兽之子禽兽扒手凯登‧阿兰科『不败之花』炽天使之拥诡异的灵魂石冰海钓竿时间尽头的虚空

                li漠北 发表于 2024-8-10 21:31:09 | 显示全部楼层 <
                过节论坛都还没啥人了,瓦老师努力搞技术,每个帖子都好有实力,出去走走看看吧
                回复

                举报

                龙腾世纪:审判『逆境中的幸运女神』赛博朋克2077无瑕的回忆贝优妮塔星芒戒指日荒戒指月陨戒指剑指撒冷质量效应三部曲

                  饥渴难耐的G 发表于 2024-8-10 21:34:52 | 显示全部楼层 <
                  回复

                  举报

                  实现梦想業火死鬥魔法不朽·传奇不熄卡洛斯·奥利维拉泰比里厄斯十年一梦官复原职男巫之歌永浴爱河虚空之海的鲸

                    Burry 发表于 2024-8-10 21:35:27 | 显示全部楼层 <
                    回复

                    举报

                    骑兽之子禽兽扒手夏之歌丹雀衔五穗,人间始丰登缘起星空

                      nuomici 发表于 2024-8-10 21:38:07 | 显示全部楼层 <
                      回复

                      举报

                      【圣诞限定】心心念念小雪人吃饱金币的Doge被释放的灵魂【新春限定】果体 隆業火死鬥男巫之歌虚空之海的鲸卡利亚权杖诺曼底号

                        折木 发表于 2024-8-10 21:45:35 | 显示全部楼层 <
                        回复

                        举报

                        虚空之海的鲸史莱姆牧场千里潋滟双贤辉石头罩不洁圣子古老金币日荒戒指森林鹿黄金树的恩惠丹雀衔五穗,人间始丰登

                          1287549 发表于 2024-8-10 21:48:26 | 显示全部楼层 <
                          回复

                          举报

                          史莱哲林千杯不醉收到情书变骚喷雾萨赫的蛋糕喜欢金币的Doge裸体克里斯果体76雄躯的昇格永亘环

                            MoJIJI 发表于 2024-8-10 21:59:35 | 显示全部楼层 <
                            回复

                            举报

                            最终幻想XIV『逆境中的幸运女神』我已倾听,我已感受,我已思考虚空之海的鲸『搓粉团珠』【新春限定】果体 隆

                              咸鱼鱼 发表于 2024-8-10 22:02:10 | 显示全部楼层 <
                              回复

                              举报

                              驯化腐化龙幼崽不洁圣子小小安全帽金牌矿工珊瑚泡泡鱼吃饱的小阿尔荒野女巫米凯拉的锋刃

                                平安即是喜乐 发表于 2024-8-10 22:17:11 | 显示全部楼层 <
                                回复

                                举报

                                风物长宜重归于好驯化黑龙幼崽雷夜嘯聲驯化红龙幼崽泰比里厄斯霹天雳地寂静岭三角头失去力量的白狼

                                  52aro 发表于 2024-8-10 23:08:16 | 显示全部楼层 <
                                  回复

                                  举报

                                  安德鲁·库珀索尔·奥丁森安德森‧戴维斯走出失恋阴影的罗罗詹米·多南

                                    bigbigbig3 发表于 2024-8-10 23:25:58 | 显示全部楼层 <
                                    回复

                                    举报

                                    近地夜航风物长宜玄生万物云上之光永亘环龙鳞石红心玉

                                      cdcai 发表于 2024-8-10 23:36:54 | 显示全部楼层 <
                                      回复

                                      举报

                                      蒂法·洛克哈特黑暗交易祈祷术炼金之心石肤术召唤古代战士敖蜃星『不败之花』永亘环『搓粉团珠』

                                        95269527 发表于 2024-8-10 23:39:33 | 显示全部楼层 <
                                        回复

                                        举报

                                        我的天使GM吸血伯爵吃饱金币的Doge阿拉喵?神灯苏格兰圆脸胖鸡小小舞台永浴爱河

                                          毛茸茸兽兽 发表于 2024-8-10 23:57:41 | 显示全部楼层 <
                                          吃瓜ing可惜俺比较懒基本都用手机刷泥潭的,不然就狠狠产出各种阴间图和题目ψ(`∇´)ψ
                                          回复

                                          举报

                                          您需要登录后才可以回帖 登录 | 立即注册

                                          本版积分规则

                                          文字版|手机版|小黑屋|GameMale

                                          GMT+8, 2025-2-23 10:21 , Processed in 0.179419 second(s), 144 queries , Redis On.

                                          Copyright © 2013-2025 GameMale

                                          All Rights Reserved.

                                          快速回复 返回列表