img/img_test.js

462 lines
12 KiB
JavaScript
Raw Normal View History

2025-07-29 16:59:49 +08:00
import img from "apigo.cc/gojs/img"
import co from "apigo.cc/gojs/console"
let g = img.createImage(1400, 2400)
// let g = img.createImage(300, 300)
g.setSansSerifFont(16)
// 创建区块网格
const b = []
for (let i = 0; i < 40; i++) {
const col = i % 5
const row = Math.floor(i / 5)
const x = 25 + col * (250 + 25)
const y = 25 + row * (250 + 25)
g.rect(x, y, 250, 250, { lineColor: "#666", lineWidth: 2 })
b.push({ x, y, width: 250, height: 250, idx: i })
}
function title(i, text) {
g.text(b[i].x, b[i].y + 250 - 30, text, { color: "#fff", bgColor: '#666', width: 250, height: 30, align: 'center', vAlign: 'middle' })
}
i = 0
title(i, "点")
for (x = 10; x < 250; x += 10) {
for (y = 10; y < 220; y += 10) {
g.point(b[i].x + x, b[i].y + y, img.randColor())
}
}
i++
title(i, "线")
g.line(b[i].x + 10, b[i].y + 10, b[i].x + 240, b[i].y + 210, { lineColor: img.randColor(), lineWidth: 1 })
g.line(b[i].x + 10, b[i].y + 50, b[i].x + 240, b[i].y + 50, { lineColor: img.randColor(), lineWidth: 3 })
g.line(b[i].x + 10, b[i].y + 115, b[i].x + 240, b[i].y + 115, { lineColor: img.randColor(), lineWidth: 5 })
i++
title(i, "矩形")
g.rect(b[i].x + 15, b[i].y + 10, 100, 50, { lineColor: img.randColor(), lineWidth: 1 })
g.rect(b[i].x + 15, b[i].y + 80, 100, 50, { lineColor: '#f90', lineWidth: 3, shadowOffset: 2 })
g.roundedRect(b[i].x + 15, b[i].y + 150, 100, 50, 10, { lineColor: '#f63', lineWidth: 5, shadowColor: '#999', shadowOffset: 3 })
g.rect(b[i].x + 135, b[i].y + 10, 100, 50, { fillColor: img.randColor(), lineWidth: 1 })
g.rect(b[i].x + 135, b[i].y + 80, 100, 50, { lineColor: '#f90', fillColor: img.randColor(), lineWidth: 3, shadowOffset: 2, shadowBlur: 3 })
g.roundedRect(b[i].x + 135, b[i].y + 150, 100, 50, 10, { lineColor: '#f63', fillColor: img.randColor(), lineWidth: 5, shadowColor: '#999', shadowOffset: 4, shadowBlur: 3 })
i++
title(i, "圆形和椭圆")
g.circle(b[i].x + 70, b[i].y + 70, 50, { lineColor: '#f00', lineWidth: 2 })
g.circle(b[i].x + 180, b[i].y + 70, 50, { fillColor: '#ff0', lineWidth: 3 })
g.ellipse(b[i].x + 70, b[i].y + 170, 60, 30, { lineColor: '#0f0', lineWidth: 2 })
g.ellipse(b[i].x + 180, b[i].y + 150, 40, 60, { fillColor: '#0ff', lineWidth: 1, shadowOffset: 2 })
i++
title(i, "多边形")
g.triangle(b[i].x + 10, b[i].y + 10, b[i].x + 10, b[i].y + 150, b[i].x + 120, b[i].y + 10)
g.polygon([b[i].x + 125, b[i].y + 50, b[i].x + 50, b[i].y + 150, b[i].x + 200, b[i].y + 150], {
lineColor: '#00f',
lineWidth: 3,
fillColor: '#ccf'
})
g.regularPolygon(6, b[i].x + 125, b[i].y + 170, 40, {
lineColor: '#f0f',
lineWidth: 2,
fillColor: '#fcf',
shadowOffset: 2
})
i++
title(i, "弧和扇形")
g.arc(b[i].x + 70, b[i].y + 70, 50, 0, Math.PI * 1.5, {
lineColor: '#f00',
lineWidth: 3
})
g.sector(b[i].x + 190, b[i].y + 120, 50, Math.PI / 4, Math.PI * 1.5, {
lineColor: '#0f0',
lineWidth: 2,
fillColor: '#cfc',
shadowOffset: 2,
})
i++
title(i, "圆环和弧环")
g.ring(b[i].x + 70, b[i].y + 70, 30, 50, {
lineColor: '#00f',
lineWidth: 3,
})
g.arcRing(b[i].x + 190, b[i].y + 120, 20, 50, Math.PI / 4, Math.PI * 1.5, {
lineColor: '#f0f',
lineWidth: 2,
fillColor: '#fcf',
shadowColor: '#0ff',
shadowOffset: -4,
})
i++
title(i, "箭头和十字")
g.arrow(b[i].x + 50, b[i].y + 70, b[i].x + 200, b[i].y + 70, 15, {
lineColor: '#f00',
lineWidth: 3
})
g.arrow(b[i].x + 200, b[i].y + 150, b[i].x + 50, b[i].y + 150, 20, {
lineColor: '#00f',
lineWidth: 4,
shadowOffset: 2,
})
g.cross(b[i].x + 125, b[i].y + 110, 40, {
lineColor: '#0a0',
lineWidth: 10,
shadowOffset: 4,
})
i++
title(i, "曲线")
g.bezierCurve([
b[i].x + 20, b[i].y + 150,
b[i].x + 100, b[i].y + 50,
b[i].x + 150, b[i].y + 200,
b[i].x + 230, b[i].y + 100
], {
lineColor: '#f00',
lineWidth: 2
})
g.quadraticCurve([
b[i].x + 20, b[i].y + 100,
b[i].x + 125, b[i].y + 200,
b[i].x + 230, b[i].y + 100
], {
lineColor: '#00f',
lineWidth: 2
})
i++
title(i, "虚线样式")
g.line(b[i].x + 20, b[i].y + 50, b[i].x + 230, b[i].y + 50, {
lineColor: '#f00',
lineWidth: 3,
dash: [10, 5]
})
g.line(b[i].x + 20, b[i].y + 100, b[i].x + 230, b[i].y + 100, {
lineColor: '#0f0',
lineWidth: 3,
dash: [5, 5]
})
g.line(b[i].x + 20, b[i].y + 150, b[i].x + 230, b[i].y + 150, {
lineColor: '#00f',
lineWidth: 3,
dash: [15, 5, 5, 5]
})
i++
title(i, "线帽样式")
g.line(b[i].x + 50, b[i].y + 50, b[i].x + 200, b[i].y + 50, {
lineColor: '#f00',
lineWidth: 10,
lineCap: img.lineCap.butt
})
g.line(b[i].x + 50, b[i].y + 100, b[i].x + 200, b[i].y + 100, {
lineColor: '#0f0',
lineWidth: 10,
lineCap: img.lineCap.round
})
g.line(b[i].x + 50, b[i].y + 150, b[i].x + 200, b[i].y + 150, {
lineColor: '#00f',
lineWidth: 10,
lineCap: img.lineCap.square
})
i++
title(i, "线连接样式")
g.lines([b[i].x + 50, b[i].y + 50, b[i].x + 150, b[i].y + 100, b[i].x + 50, b[i].y + 150], {
lineColor: '#f00',
lineWidth: 8,
lineJoin: img.lineJoin.bevel
})
g.lines([b[i].x + 150, b[i].y + 50, b[i].x + 50, b[i].y + 100, b[i].x + 150, b[i].y + 150], {
lineColor: '#0f0',
lineWidth: 8,
lineJoin: img.lineJoin.miter
})
g.lines([b[i].x + 100, b[i].y + 50, b[i].x + 200, b[i].y + 100, b[i].x + 100, b[i].y + 150], {
lineColor: '#00f',
lineWidth: 8,
lineJoin: img.lineJoin.round
})
i++
title(i, "星形")
g.star(5, b[i].x + 70, b[i].y + 70, 50, 20, {
lineColor: '#f00',
lineWidth: 2,
})
g.star(6, b[i].x + 180, b[i].y + 70, 50, 25, {
lineColor: '#0f0',
lineWidth: 2,
fillColor: '#cfc'
})
g.star(8, b[i].x + 125, b[i].y + 160, 50, 20, {
lineColor: '#00f',
lineWidth: 2,
fillColor: '#ccf'
})
i++
title(i, "网格")
g.grid(b[i].x + 25, b[i].y + 10, 200, 200, 20, {
lineColor: '#ccc',
lineWidth: 1
})
i++
title(i, "文本")
g.setSerifFont(12)
g.text(b[i].x + 10, b[i].y + 10, "Hello", { color: "#f00" })
g.setSansSerifFont(16)
g.text(b[i].x + 10, b[i].y + 30, "你好呀", { color: "#f00", borderColor: '#f90', paddingX: 4 })
g.setSansSerifFont(20)
g.text(b[i].x + 10, b[i].y + 60, "你好呀", { color: "#f00", width: 100, height: 50, align: 'center', vAlign: 'middle', bgColor: '#eee', shadowOffset: 2, shadowColor: '#999', borderRadius: 4 })
g.setSansSerifFont(16)
g.text(b[i].x + 10, b[i].y + 120, "你好呀", { color: "#f00", width: 100, height: 50, align: 'right', vAlign: 'bottom', borderColor: '#f90', paddingX: 4, bgColor: '#ff0', borderRadius: 8 })
g.text(b[i].x + 10, b[i].y + 180, "截断测试", { color: "#f00", width: 50, noWrap: true, borderColor: '#f90', paddingX: 4, shadowOffset: 2, borderRadius: 4 })
g.text(b[i].x + 120, b[i].y + 10, "这是一段长文本Cut me cut me cut me\nabcdefg1234567890\n\r【结束】", {
color: "#00f",
width: 120,
align: 'center',
bgColor: '#cff',
borderWidth: 2,
borderRadius: 4,
paddingX: 8,
paddingY: 4,
lineHeight: 1.2,
})
i++
title(i, "一幅山水画")
const s = img.createImage(250, 220)
let s1x = b[i].x
let s1y = b[i].y
s.circle(200, 40, 20, { fillColor: '#FFD700', shadowColor: '#ff6', shadowBlur: 5 })
s.path('M-10,210 L70,120 L150,210 Z', { fillColor: '#7CA982' })
s.path('M130,210 L210,110 L270,210 Z', { fillColor: '#5A9E6F' })
s.path('M50,210 L120,90 L180,210 Z', { fillColor: '#4A7C59' })
s.path('M150,210 L220,130 L290,210 Z', { fillColor: '#3D6B4F' })
s.path('M0,200 C40,180 80,220 120,200 C160,180 200,220 240,200 L260,220 L0,220 Z', { fillColor: '#4A90E2' })
s.path('M0,210 C30,195 60,210 90,205 C120,200 150,215 180,210 C210,205 240,215 250,210 L250,220 L0,220 Z', { fillColor: '#3A7BC8' })
g.put(s, b[i].x, b[i].y)
i++
let s1
title(i, "缩放")
s1 = g.sub(s1x, s1y, 250, 220)
s1.resize(200, 200)
g.rect(b[i].x + 25, b[i].y + 10, 200, 200, { lineColor: '#f90' })
g.put(s1, b[i].x + 25, b[i].y + 10)
i++
title(i, "等比缩放")
s1 = g.sub(s1x, s1y, 250, 220)
s1.contain(200, 200)
g.rect(b[i].x + 25, b[i].y + 10, 200, 200, { lineColor: '#f90' })
g.put(s1, b[i].x + 25, b[i].y + 10)
i++
title(i, "裁剪缩放")
s1 = g.sub(s1x, s1y, 250, 220)
s1.cover(200, 200)
g.rect(b[i].x + 25, b[i].y + 10, 200, 200, { lineColor: '#f90' })
g.put(s1, b[i].x + 25, b[i].y + 10)
i++
// 裁剪操作
title(i, "图像裁剪")
s1 = s.clone()
s1.crop(0, 0, 200, 200) // 裁剪区域
g.rect(b[i].x + 25, b[i].y + 10, 200, 200, { lineColor: '#f90' })
g.put(s1, b[i].x + 25, b[i].y + 10)
i++
title(i, "旋转")
s1 = g.sub(s1x, s1y, 250, 220)
s1.resize(125, 110)
s1.rotate(45)
g.put(s1, b[i].x, b[i].y)
s1 = g.sub(s1x, s1y, 250, 220)
s1.resize(125, 110)
s1.rotate(-45)
g.put(s1, b[i].x + 80, b[i].y + 80)
i++
title(i, "水平翻转")
s1 = s.clone()
s1.flipH()
g.put(s1, b[i].x, b[i].y)
i++
title(i, "垂直翻转")
s1 = s.clone()
s1.flipV()
g.put(s1, b[i].x, b[i].y)
i++
// 灰度滤镜
title(i, "灰度滤镜")
s1 = s.clone()
s1.grayscale()
g.put(s1, b[i].x, b[i].y)
i++
// 高斯模糊
title(i, "高斯模糊")
s1 = s.clone()
s1.gaussianBlurFilter(2) // 模糊强度参数
g.put(s1, b[i].x, b[i].y)
i++
// 锐化滤镜
title(i, "锐化滤镜")
s1 = s.clone()
s1.sharpenFilter(0.5) // 锐化强度参数
g.put(s1, b[i].x, b[i].y)
i++
// 边缘检测
title(i, "边缘检测")
s1 = s.clone()
s1.edgeDetectionFilter(1) // 边缘检测强度
g.put(s1, b[i].x, b[i].y)
i++
// 浮雕效果
title(i, "浮雕效果")
s1 = s.clone()
s1.embossFilter(1.8) // 浮雕强度
g.put(s1, b[i].x, b[i].y)
i++
// 亮度调整
title(i, "亮度调整")
s1 = s.clone()
s1.adjustBrightness(30) // 增加30%亮度
g.put(s1, b[i].x, b[i].y)
i++
// 对比度调整
title(i, "对比度调整")
s1 = s.clone()
s1.adjustContrast(50) // 增加50%对比度
g.put(s1, b[i].x, b[i].y)
i++
// 饱和度调整
title(i, "饱和度调整")
s1 = s.clone()
s1.adjustSaturation(70) // 增加70%饱和度
g.put(s1, b[i].x, b[i].y)
i++
// 伽马校正
title(i, "伽马校正")
s1 = s.clone()
s1.gammaCorrection(1.8) // 伽马值
g.put(s1, b[i].x, b[i].y)
i++
title(i, "随机背景1-3")
s1 = img.createImage(250, 70)
s1.randBG(1)
g.put(s1, b[i].x, b[i].y)
g.rect(b[i].x, b[i].y, 250, 70, { lineColor: '#f90' })
s1 = img.createImage(250, 70)
s1.randBG(2)
g.put(s1, b[i].x, b[i].y + 75)
g.rect(b[i].x, b[i].y + 75, 250, 70, { lineColor: '#f90' })
s1 = img.createImage(250, 70)
s1.randBG(3)
g.put(s1, b[i].x, b[i].y + 150)
g.rect(b[i].x, b[i].y + 150, 250, 70, { lineColor: '#f90' })
i++
title(i, "随机背景4-6")
s1 = img.createImage(250, 70)
s1.randBG(4)
g.put(s1, b[i].x, b[i].y)
g.rect(b[i].x, b[i].y, 250, 70, { lineColor: '#f90' })
s1 = img.createImage(250, 70)
s1.randBG(5)
g.put(s1, b[i].x, b[i].y + 75)
g.rect(b[i].x, b[i].y + 75, 250, 70, { lineColor: '#f90' })
s1 = img.createImage(250, 70)
s1.randBG(6)
g.put(s1, b[i].x, b[i].y + 150)
g.rect(b[i].x, b[i].y + 150, 250, 70, { lineColor: '#f90' })
i++
title(i, "随机背景7-9")
s1 = img.createImage(250, 70)
s1.randBG(7)
g.put(s1, b[i].x, b[i].y)
g.rect(b[i].x, b[i].y, 250, 70, { lineColor: '#f90' })
s1 = img.createImage(250, 70)
s1.randBG(8)
g.put(s1, b[i].x, b[i].y + 75)
g.rect(b[i].x, b[i].y + 75, 250, 70, { lineColor: '#f90' })
s1 = img.createImage(250, 70)
s1.randBG(9)
g.put(s1, b[i].x, b[i].y + 150)
g.rect(b[i].x, b[i].y + 150, 250, 70, { lineColor: '#f90' })
i++
title(i, "图片验证码")
s1 = img.createImage(250, 70)
s1.setSansSerifFont(24)
s1.randBG(2)
s1.randText("123456")
s1.randBG(1)
g.put(s1, b[i].x, b[i].y)
g.rect(b[i].x, b[i].y, 250, 70, { lineColor: '#f90' })
for (let j = 1; j <= 5; j++) {
let lvB = j
let lvT = j <= 3 ? 1 : 2
title(i, "验证码 背景Lv " + lvB + '+' + lvT)
s1 = img.createImage(250, 70)
s1.setSansSerifFont(24)
s1.randBG(lvB)
s1.randText("123456")
s1.randBG(lvT)
g.put(s1, b[i].x, b[i].y)
g.rect(b[i].x, b[i].y, 250, 70, { lineColor: '#f90' })
s1 = img.createImage(250, 70)
s1.setSansSerifFont(24)
s1.randBG(lvB)
let r = s1.randText("你拧情")
s1.randBG(lvT)
for (let rect of r) {
s1.rect(rect[0], rect[1], rect[2], rect[3], { lineColor: '#f90' })
}
g.put(s1, b[i].x, b[i].y + 75)
g.rect(b[i].x, b[i].y + 75, 250, 70, { lineColor: '#f90' })
s1 = img.createImage(250, 70)
s1.setSansSerifFont(24)
s1.randBG(lvB)
s1.randText("A1CL")
s1.randBG(lvT)
g.put(s1, b[i].x, b[i].y + 150)
g.rect(b[i].x, b[i].y + 150, 250, 70, { lineColor: '#f90' })
i++
}
// // ========================= 导出图像 =========================
g.exportImage("testimg/全面绘图测试.png", 95)
co.log("测试图像生成完成!")