[画猜脚本] 画只狼狼过七夕 - 修勾临摹工具
本帖最后由 GMagels 于 2024-8-13 23:40 编辑各位晚上好，让我看看是谁七夕的大晚上在刷帖子，哦，我也是啊，那没事了...
七夕寂静的夜晚，想要画一只狼狼，但是又没有那个画功，怎么办？
没事，适配画猜界面的临摹辅助脚本-修图勾线临摹工具 ，简称修勾临摹工具来了！
声明：脚本仅供画猜娱乐临摹学习之用，请尊重原作，临摹不等于原创，禁止用作商业用途。
static/image/hrline/line6.png
主要功能展示
（功能演示中临摹的图是大佬@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. 一键还原，显示临摹纸
将画布大小还原为原大小，背景重设成网格背景，显示临摹纸的内容。
画布遮挡提交和清空按钮时，点击这两个按钮不会生效。
因此，请先点击还原按钮再点击提交！
static/image/hrline/line6.png
环境&兼容性环境：在PC Chrome浏览器 1920*1080 屏幕大小 环境下开发，其余环境未测试兼容：不兼容画猜成图上传脚本！不兼容原因：画猜成图脚本开启后，无论是否开启临摹工具，都会导致光标落点和画布落点有错位，因此不兼容。
static/image/hrline/line6.png
有了这个修勾临摹工具，期待坛友们在画猜区更好的发挥！祝各位七夕节快乐（逃
此图为临摹结果，非瓦尼原创，临摹的原图是大佬@Cambrian 画的布莱泽
static/image/hrline/line7.png
更新记录
V02 20240810 更新0.2版本感谢u老师@user_login 的建议，现在还原按钮会记忆最新加载的背景图。还原成网格图之后再次点击还原按钮，会还原最新加载的背景图。
V03 20240813 更新0.3版本 代码贡献者：u老师@user_login本次0.3版本更新代码由u老师@user_login 提供，特此鸣谢！0.3版本支持直接通过读档按钮读入不同大小的图片（原版成图上传脚本的效果）。同时，0.3版本修正了读入图片后需要使用橡皮擦固定的bug，通过读档读入图片可直接继续画作，无需额外操作。更新的详细说明请查看这篇日志 -> 点我跳转 本帖最后由 user_login 于 2024-8-13 15:33 编辑
好久之前是借助软件固定窗口+设置不透明来临摹的，这下方便那多了。
· 还原那里能在还原后 再点一下来重新显示背景图继续临摹就更好了
· 读档的功能改一下canvas的drawImage方法的完整参数根据图片大小和画布大小设置绘制的范围，就可以取代图片上传脚本了
· 读档后还要擦一下那里 过会看看原本的画猜工具是怎么写的
reader.onload = function(event) {
var img = new Image();
img.src = event.target.result;
img.onload = function(){
//图片宽高和画布一致就直接画（是存档），不一致缩小后居中画（是传图）
if(img.height==drawCanvas.height&&img.width==drawCanvas.width){
drawCanvas.getContext("2d").drawImage( img, 0, 0);}
else{
//sc缩放倍率>=1；padding边距；dw缩放后的图片宽度...
let sc = Math.max(img.width/drawCanvas.width,img.height/drawCanvas.height,1);
let padding = sc==1?1:0.9;
let dw = img.width/sc*padding;
let dh = img.height/sc*padding;
drawCanvas.getContext("2d").drawImage( img, (drawCanvas.width-dw)/2, (drawCanvas.height-dh)/2, dw, dh);}
//使用原有的方法加入到历史画布数据的数组中 arr存储每个操作后的图片数据；obj画布。
arr.push(obj.getImageData(0,0,drawCanvas.width,drawCanvas.height));
//toolBox.querySelector('#draw .type .eraser').click();
//showMsg("成功加载存档，已切换至橡皮擦工具，<span style='text-decoration: underline;'>擦一下任意位置以固定存档</span>", 5000);
}
};
画得挺像的呢，这个临摹工具好强大呀{:6_169:} 我擦，大佬太强了，你画我猜区估计要精彩起来了{:6_172:} 喜欢临摹的坛友可以使用，本人可能还是直接上传图片了 {:4_88:}还没进入过画猜区，看起来好厉害 过节论坛都还没啥人了，瓦老师努力搞技术，每个帖子都好有实力，出去走走看看吧 这个光影好帅，不愧是楼主 这个临摹看起来挺高级的，很帅气的狼狼呢。 还是喜欢自己画{:6_188:} 但作为辅助工具来说很不错捏 好耶好耶又有新功能可以用了 感觉很厉害的样子，虽然我用不上{:4_114:} 大佬你真的在认真的教画画{:6_164:}可我是个笨学生惹 画只狼狼过七夕 ×
偷只狼狼过七夕 √ 赛博男友陪伴七夕.jpg 虽然是临摹，但是画出来也很有成就感 反正我也学不会就来支持一下好了哈哈哈
七夕快乐哈～ 很方便，描图的难度就小很多了 临摹出来也很厉害了，为爱绘画好评 吃瓜ing可惜俺比较懒基本都用手机刷泥潭的，不然就狠狠产出各种阴间图和题目ψ(｀∇´)ψ