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

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，通过读档读入图片可直接继续画作，无需额外操作。

更新的详细说明请查看这篇日志 -> 点我跳转

user_login · 发表于 2024-8-10 21:58:22

本帖最后由 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);
}
};