462 lines
12 KiB
JavaScript
462 lines
12 KiB
JavaScript
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("测试图像生成完成！")
|