Node.js
画像処理でアプリを作っています。Jimp
画像処理ライブラリとして使用しています。パラメータ(x、y、幅、高さ)に基づいて破線の境界線を作成しようとしていますが、現在、境界線を上、右、下、左にしようとしています。左と下の境界線でスキャンを逆にする必要がありますが、幅と高さとして負の数を指定することはできませんscanQuiet
。私の問題を解決する方法はありますか?
コード:
const Jimp = require("jimp");
function dashedBorder(
image,
{ lineDash, lineWidth, color },
{ x, y, width, height }
) {
let drawing = true,
passed = 0,
offset = lineWidth - 1;
color = Jimp.intToRGBA(color);
// Top border
image.scanQuiet(x - offset, y - offset, width, 1, (x, y) => {
if (drawing) {
const pixelColor = Jimp.intToRGBA(image.getPixelColor(x, y));
const newColor = blendColors(pixelColor, color);
for (let i = 0; i < lineWidth; i++) {
image.setPixelColor(
Jimp.rgbaToInt(newColor.r, newColor.g, newColor.b, 255),
x,
y + i
);
}
}
passed++;
if (
(passed >= lineDash[0] && drawing) ||
(passed >= lineDash[1] && !drawing)
) {
drawing = !drawing;
passed = 0;
}
});
drawing = true;
// Right border
image.scanQuiet(
x + width + offset,
y + lineWidth + offset,
1,
height - lineWidth * 2,
(x, y) => {
if (drawing) {
const pixelColor = Jimp.intToRGBA(image.getPixelColor(x, y));
const newColor = blendColors(pixelColor, color);
for (let i = 0; i < lineWidth; i++) {
image.setPixelColor(
Jimp.rgbaToInt(newColor.r, newColor.g, newColor.b, 255),
x - i,
y
);
}
}
passed++;
if (
(passed >= lineDash[0] && drawing) ||
(passed >= lineDash[1] && !drawing)
) {
drawing = !drawing;
passed = 0;
}
}
);
drawing = true;
// Bottom border
image.scanQuiet(
x + width + offset,
y + height + offset,
-width,
-1,
(x, y) => {
if (drawing) {
const pixelColor = Jimp.intToRGBA(image.getPixelColor(x, y));
const newColor = blendColors(pixelColor, color);
for (let i = 0; i < lineWidth; i++) {
image.setPixelColor(
Jimp.rgbaToInt(newColor.r, newColor.g, newColor.b, 255),
x,
y - i
);
}
}
passed++;
if (
(passed >= lineDash[0] && drawing) ||
(passed >= lineDash[1] && !drawing)
) {
drawing = !drawing;
passed = 0;
}
}
);
drawing = true;
// Left border
image.scanQuiet(
x - offset,
y + height - lineWidth - offset,
1,
-height + lineWidth * 2,
(x, y) => {
if (drawing) {
const pixelColor = Jimp.intToRGBA(image.getPixelColor(x, y));
const newColor = blendColors(pixelColor, color);
for (let i = 0; i < lineWidth; i++) {
image.setPixelColor(
Jimp.rgbaToInt(newColor.r, newColor.g, newColor.b, 255),
x + i,
y
);
}
}
passed++;
if (
(passed >= lineDash[0] && drawing) ||
(passed >= lineDash[1] && !drawing)
) {
drawing = !drawing;
passed = 0;
}
}
);
}
function blendColors(c1, c2) {
const stepPoint = c2.a / 255;
const r = c1.r + stepPoint * (c2.r - c1.r);
const g = c1.g + stepPoint * (c2.g - c1.g);
const b = c1.b + stepPoint * (c2.b - c1.b);
return { r, g, b };
}
(async () => {
let image = await Jimp.read("./test.png");
dashedBorder(
image,
{ lineWidth: 3, lineDash: [20, 5], color: 0x1a53ffbb },
{ x: 0, y: 0, width: image.bitmap.width, height: image.bitmap.height }
);
image.write("./test-border.png");
})();