+
+
蒙版绘制工具
+
+
+
+
+
+
+
+
+
-
-
-
+
+
@@ -822,6 +855,7 @@
蒙版绘制工具
const maskDrawer = new MaskDrawer(
'baseCanvas',
'maskCanvas',
+ "hintCanvas",
'brush',
'eraser',
'size',
@@ -1431,7 +1465,7 @@
蒙版绘制工具
uploadContainer.appendChild(nameLabel);
let actionDiv = document.createElement('div');
- actionDiv.style = `padding: 0 8px;`
+ actionDiv.style = `margin-bottom:8px;`
// Create an input field for the image name
const uploadImageInput = document.createElement("button");
@@ -3480,6 +3514,7 @@
${title}
constructor(
baseCanvasId,
maskCanvasId,
+ hintCanvasId, // 添加新参数
brushBtnId,
eraserBtnId,
sizeSliderId,
@@ -3492,9 +3527,11 @@
${title}
) {
this.baseCanvas = document.getElementById(baseCanvasId);
this.maskCanvas = document.getElementById(maskCanvasId);
- this.maskCanvas.style.opacity = "0.8"
+ this.hintCanvas = document.getElementById(hintCanvasId); // 获取新的 canvas
+ this.maskCanvas.style.opacity = "0.8";
this.baseCtx = this.baseCanvas.getContext('2d');
this.maskCtx = this.maskCanvas.getContext('2d');
+ this.hintCtx = this.hintCanvas.getContext('2d'); // 获取上下文
this.isDrawing = false;
this.currentTool = 'brush';
this.brushSize = 10;
@@ -3503,6 +3540,10 @@
${title}
this.baseCtx.fillStyle = 'white';
this.baseCtx.fillRect(0, 0, this.baseCanvas.width, this.baseCanvas.height);
+ // 设置 hintCanvas 的尺寸与其他 canvas 一致
+ this.hintCanvas.width = this.baseCanvas.width;
+ this.hintCanvas.height = this.baseCanvas.height;
+
// 工具选择
this.brushBtn = document.getElementById(brushBtnId);
this.eraserBtn = document.getElementById(eraserBtnId);
@@ -3537,10 +3578,44 @@
${title}
this.maskCanvas.addEventListener('mousemove', (e) => this.draw(e));
this.maskCanvas.addEventListener('mouseup', () => this.stopDrawing());
this.maskCanvas.addEventListener('mouseout', () => this.stopDrawing());
+
+ this.maskCanvas.addEventListener('touchstart', (e) => {
+ e.preventDefault();
+ this.startDrawing(e.touches[0]);
+ });
+ this.maskCanvas.addEventListener('touchmove', (e) => {
+ e.preventDefault();
+ this.draw(e.touches[0]);
+ });
+ this.maskCanvas.addEventListener('touchend', (e) => {
+ e.preventDefault();
+ this.stopDrawing();
+ });
+ this.maskCanvas.addEventListener('touchcancel', (e) => {
+ e.preventDefault();
+ this.stopDrawing();
+ });
}
closeEdit() {
- if (this.close) this.close()
+ if (this.close) this.close();
+ }
+
+ drawBrushCircle(x, y) {
+ // 清除之前的提示圈
+ this.hintCtx.clearRect(0, 0, this.hintCanvas.width, this.hintCanvas.height);
+
+ this.hintCtx.fillStyle = `rgba(${this.currentTool === 'brush' ? 255 : 0},0,${this.currentTool === 'brush' ? 0 : 255},0.5)`
+ // 绘制新的提示圈
+ this.hintCtx.beginPath();
+ this.hintCtx.arc(x, y, this.brushSize / 2, 0, 2 * Math.PI);
+ // this.hintCtx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+ // this.hintCtx.lineWidth = 1;
+ // this.hintCtx.stroke();
+ this.hintCtx.fill();
+ }
+ clearBrushCircle() {
+ this.hintCtx.clearRect(0, 0, this.hintCanvas.width, this.hintCanvas.height)
}
newImageForMaskEdit(img) {
@@ -3549,7 +3624,19 @@
${title}
this.baseCanvas.height = height;
this.maskCanvas.width = width;
this.maskCanvas.height = height;
+ // 设置 hintCanvas 的尺寸与其他 canvas 一致
+ this.hintCanvas.width = width;
+ this.hintCanvas.height = height;
+
this.baseCtx.drawImage(img, 0, 0, this.baseCanvas.width, this.baseCanvas.height);
+ //设置笔刷最大值和间隔
+ this.sizeSlider.setAttribute("max", parseInt(Math.max(width, height) * 0.5))
+ this.sizeSlider.setAttribute("step", Math.max(5, parseInt(Math.max(width, height) * 0.01)));
+
+ this.drawBrushCircle(
+ parseInt(parseInt(this.maskCanvas.width * 0.5)),
+ parseInt(parseInt(this.maskCanvas.height * 0.5))
+ );
}
loadMask(maskImg) {
@@ -3564,15 +3651,27 @@
${title}
if (tool === 'brush') {
this.brushBtn.classList.add('active');
this.eraserBtn.classList.remove('active');
+
+ this.brushBtn.classList.remove('unactive');
+ this.eraserBtn.classList.add('unactive');
+
} else {
this.eraserBtn.classList.add('active');
this.brushBtn.classList.remove('active');
+
+ this.eraserBtn.classList.remove('unactive');
+ this.brushBtn.classList.add('unactive');
}
}
changeBrushSize(e) {
this.brushSize = parseInt(e.target.value);
this.sizeValue.textContent = this.brushSize;
+
+ this.drawBrushCircle(
+ parseInt(parseInt(this.maskCanvas.width * 0.5)),
+ parseInt(parseInt(this.maskCanvas.height * 0.5))
+ );
}
clearCanvas() {
@@ -3590,9 +3689,6 @@
${title}
// 反相图像数据
for (let i = 0; i < imageDataData.length; i += 4) {
- // imageDataData[i] = 255 - imageDataData[i];
- // imageDataData[i + 1] = 255 - imageDataData[i + 1];
- // imageDataData[i + 2] = 255 - imageDataData[i + 2];
imageDataData[i + 3] = 255 - imageDataData[i + 3]; // 反相透明度
}
@@ -3605,43 +3701,37 @@
${title}
let base64 = tempCanvas.toDataURL();
-
// 对外提供接口，可以将dataURL传递到需要的地方
- // console.log(dataURL);
this.saveCallback(base64, this.maskCanvas.width, this.maskCanvas.height);
}
autoCut() {
- // 获取选中的模型名称
const selectedModel = this.modelSelect.value;
console.log(`Using model: ${selectedModel}`);
-
const dataURL = this.baseCanvas.toDataURL('image/png');
this.autoCutCallback(selectedModel, dataURL).then(maskImg => {
this.maskCtx.clearRect(0, 0, this.maskCanvas.width, this.maskCanvas.height);
this.loadMask(maskImg);
- // 这里假设自动抠图算法已经实现
- // 我们简单模拟一下这个功能
- // this.maskCtx.fillStyle = 'rgba(255, 255, 255, 0.5)';
- // this.maskCtx.fillRect(50, 50, this.maskCanvas.width - 100, this.maskCanvas.height - 100);
-
});
-
}
startDrawing(e) {
this.isDrawing = true;
+ this.clearBrushCircle()
this.draw(e);
}
draw(e) {
- if (!this.isDrawing) return;
-
const rect = this.maskCanvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
+ if (!this.isDrawing) {
+ this.drawBrushCircle(x, y);
+ return;
+ }
+
this.maskCtx.lineWidth = this.brushSize;
this.maskCtx.lineCap = 'round';
this.maskCtx.lineJoin = 'round';
@@ -3676,6 +3766,7 @@
${title}
}
+
diff --git a/web/javascript/checkVersion_mixlab.js b/web/javascript/checkVersion_mixlab.js
index 0bef9768..d687cf47 100644
--- a/web/javascript/checkVersion_mixlab.js
+++ b/web/javascript/checkVersion_mixlab.js
@@ -3,7 +3,7 @@ import { app } from '../../../scripts/app.js'
const repoOwner = 'shadowcz007' // 替换为仓库的所有者
const repoName = 'comfyui-mixlab-nodes' // 替换为仓库的名称
-const version = 'v0.36.0'
+const version = 'v0.37.0'
fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/releases/latest`)
.then(response => response.json())