mirror of
https://github.com/boxgaming/qbjs.git
synced 2024-09-20 04:24:45 +00:00
additional 2d graphic methods
This commit is contained in:
boxgaming
parent
d55414c49f
commit
5687e3b2e3
1 changed files with 262 additions and 59 deletions
|
|
@ -1,6 +1,14 @@
|
||||||
Export RotoZoom, FillCircle, FillEllipse, FillTriangle
|
Const DEFAULT = "butt"
|
||||||
|
Const ROUND = "round"
|
||||||
|
Const SQUARE = "square"
|
||||||
|
|
||||||
Sub RotoZoom(centerX As Long, centerY As Long, img As Long, xScale As Single, yScale As Single, rotation As Single)
|
Export DEFAULT, ROUND, SQUARE
|
||||||
|
Export RotoZoom, SaveImage
|
||||||
|
Export Triangle, FillTriangle, RoundRect, FillRoundRect
|
||||||
|
Export Shadow, ShadowOff, LineWidth, LineCap
|
||||||
|
Export FillCircle, Ellipse, FillEllipse, Curve, Bezier
|
||||||
|
|
||||||
|
Sub RotoZoom (centerX As Long, centerY As Long, img As Long, xScale As Single, yScale As Single, rotation As Single)
|
||||||
Dim newImage As Long
|
Dim newImage As Long
|
||||||
Dim imgWidth, imgHeight
|
Dim imgWidth, imgHeight
|
||||||
imgWidth = _Width(img)
|
imgWidth = _Width(img)
|
||||||
|
|
@ -8,79 +16,274 @@ Sub RotoZoom(centerX As Long, centerY As Long, img As Long, xScale As Single, yS
|
||||||
Dim destImg As Long
|
Dim destImg As Long
|
||||||
destImage = _Dest
|
destImage = _Dest
|
||||||
|
|
||||||
$If Javascript Then
|
$If Javascript Then
|
||||||
var origImg = QB.getImage(img);
|
var origImg = QB.getImage(img);
|
||||||
var cx = imgWidth / 2.0;
|
var cx = imgWidth / 2.0;
|
||||||
var cy = imgHeight / 2.0;
|
var cy = imgHeight / 2.0;
|
||||||
|
|
||||||
var destImg = QB.getImage(destImg);
|
var destImg = QB.getImage(destImg);
|
||||||
var ctx = destImg.getContext("2d");
|
var ctx = destImg.getContext("2d");
|
||||||
ctx.save();
|
ctx.save();
|
||||||
|
|
||||||
ctx.translate(centerX, centerY);
|
ctx.translate(centerX, centerY);
|
||||||
ctx.rotate((Math.PI / 180) * rotation);
|
ctx.rotate((Math.PI / 180) * rotation);
|
||||||
ctx.scale(xScale, yScale);
|
ctx.scale(xScale, yScale);
|
||||||
ctx.drawImage(origImg, -cx, -cy);
|
ctx.drawImage(origImg, -cx, -cy);
|
||||||
|
|
||||||
ctx.restore();
|
ctx.restore();
|
||||||
$End If
|
$End If
|
||||||
End Sub
|
End Sub
|
||||||
|
|
||||||
|
Sub SaveImage (imageId As Long, filepath As String)
|
||||||
|
$If Javascript Then
|
||||||
|
var vfs = QB.vfs();
|
||||||
|
var filename = vfs.getFileName(filepath);
|
||||||
|
var ppath = vfs.getParentPath(filepath);
|
||||||
|
var pnode = null;
|
||||||
|
if (ppath == "") { pnode = QB.vfsCwd(); }
|
||||||
|
else { pnode = vfs.getNode(ppath, QB.vfsCwd()); }
|
||||||
|
if (!pnode) {
|
||||||
|
throw Object.assign(new Error("Path not found: [" + ppath + "]"), { _stackDepth: 1 });
|
||||||
|
}
|
||||||
|
var img = QB.getImage(imageId);
|
||||||
|
var f = vfs.createFile(filename, pnode);
|
||||||
|
var complete = false;
|
||||||
|
await img.toBlob(async function(b) {
|
||||||
|
var ab = await b.arrayBuffer();
|
||||||
|
vfs.writeData(f, ab);
|
||||||
|
complete = true;
|
||||||
|
});
|
||||||
|
while (!complete) {
|
||||||
|
await GX.sleep(10);
|
||||||
|
}
|
||||||
|
$End If
|
||||||
|
|
||||||
|
End Sub
|
||||||
|
|
||||||
Sub FillCircle(x As Long, y As Long, radius As Long, clr As _Unsigned Long)
|
Sub FillCircle (x As Long, y As Long, radius As Long, clr As _Unsigned Long)
|
||||||
Dim As Long r, g, b, a, destImg
|
Dim destImg As Long
|
||||||
r = _Red(clr)
|
|
||||||
g = _Green(clr)
|
|
||||||
b = _Blue(clr)
|
|
||||||
a = _Alpha(clr)
|
|
||||||
destImg = _Dest
|
destImg = _Dest
|
||||||
|
|
||||||
$If Javascript Then
|
If clr = undefined Then
|
||||||
var ctx = QB.getImage(destImg).getContext("2d");
|
clr = _DefaultColor
|
||||||
ctx.fillStyle = "rgba(" + r + ", " + g + ", " + b + ", " + a + ")"
|
End If
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
$If Javascript Then
|
||||||
ctx.fill();
|
var c = QB.colorToRGB(clr);
|
||||||
$End If
|
var ctx = QB.getImage(destImg).getContext("2d");
|
||||||
|
ctx.fillStyle = c.rgba();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, radius, 0, 2 * Math.PI);
|
||||||
|
ctx.fill();
|
||||||
|
$End If
|
||||||
End Sub
|
End Sub
|
||||||
|
|
||||||
|
Sub Ellipse(x As Long, y As Long, radiusX As Long, radiusY As Long, rotation As Integer, clr As _Unsigned Long)
|
||||||
|
_Ellipse x, y, radiusX, radiusY, rotation, clr, false
|
||||||
|
End Sub
|
||||||
|
|
||||||
Sub FillEllipse(x As Long, y As Long, radiusX As Long, radiusY As Long, rotation As Integer, clr As _Unsigned Long)
|
Sub FillEllipse (x As Long, y As Long, radiusX As Long, radiusY As Long, rotation As Integer, clr As _Unsigned Long)
|
||||||
Dim As Long r, g, b, a, destImg
|
_Ellipse x, y, radiusX, radiusY, rotation, clr, true
|
||||||
r = _Red(clr)
|
End Sub
|
||||||
g = _Green(clr)
|
|
||||||
b = _Blue(clr)
|
Sub _Ellipse (x As Long, y As Long, radiusX As Long, radiusY As Long, rotation As Integer, clr As _Unsigned Long, fill)
|
||||||
a = _Alpha(clr)
|
Dim destImg As Long
|
||||||
destImg = _Dest
|
destImg = _Dest
|
||||||
If rotation = undefined Then
|
If rotation = undefined Then
|
||||||
rotation = 0
|
rotation = 0
|
||||||
End If
|
End If
|
||||||
|
If clr = undefined Then
|
||||||
|
clr = _DefaultColor
|
||||||
|
End If
|
||||||
|
|
||||||
$If Javascript Then
|
$If Javascript Then
|
||||||
var ctx = QB.getImage(destImg).getContext("2d");
|
var c = QB.colorToRGB(clr);
|
||||||
ctx.fillStyle = "rgba(" + r + ", " + g + ", " + b + ", " + a + ")"
|
var ctx = QB.getImage(destImg).getContext("2d");
|
||||||
ctx.beginPath();
|
if (fill) {
|
||||||
ctx.ellipse(x, y, radiusX, radiusY, rotation * (Math.PI / 180), 0, 2 * Math.PI);
|
ctx.fillStyle = c.rgba();
|
||||||
ctx.fill();
|
} else {
|
||||||
$End If
|
ctx.strokeStyle = c.rgba();
|
||||||
|
ctx.lineWidth = QB.defaultLineWidth();
|
||||||
|
}
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.ellipse(x, y, radiusX, radiusY, rotation * (Math.PI / 180), 0, 2 * Math.PI);
|
||||||
|
if (fill) {
|
||||||
|
ctx.fill();
|
||||||
|
} else {
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
$End If
|
||||||
End Sub
|
End Sub
|
||||||
|
|
||||||
Sub FillTriangle(x1 As Long, y1 As Long, x2 As Long, y2 As Long, x3 As Long, y3 As Long, clr As _Unsigned Long)
|
Sub Triangle (x1 As Long, y1 As Long, x2 As Long, y2 As Long, x3 As Long, y3 As Long, clr As _Unsigned Long)
|
||||||
Dim As Long r, g, b, a, destImg
|
_Triangle x1, y1, x2, y2, x3, y3, clr, false
|
||||||
r = _Red(clr)
|
End Sub
|
||||||
g = _Green(clr)
|
|
||||||
b = _Blue(clr)
|
Sub FillTriangle (x1 As Long, y1 As Long, x2 As Long, y2 As Long, x3 As Long, y3 As Long, clr As _Unsigned Long)
|
||||||
a = _Alpha(clr)
|
_Triangle x1, y1, x2, y2, x3, y3, clr, true
|
||||||
|
End Sub
|
||||||
|
|
||||||
|
Sub _Triangle (x1 As Long, y1 As Long, x2 As Long, y2 As Long, x3 As Long, y3 As Long, clr As _Unsigned Long, fill)
|
||||||
|
Dim destImg As Long
|
||||||
destImg = _Dest
|
destImg = _Dest
|
||||||
|
|
||||||
$If Javascript Then
|
If clr = undefined Then
|
||||||
var ctx = QB.getImage(destImg).getContext("2d");
|
clr = _DefaultColor
|
||||||
ctx.fillStyle = "rgba(" + r + ", " + g + ", " + b + ", " + a + ")"
|
End If
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(x1, y1);
|
$If Javascript Then
|
||||||
ctx.lineTo(x2, y2);
|
var c = QB.colorToRGB(clr);
|
||||||
ctx.lineTo(x3, y3);
|
var ctx = QB.getImage(destImg).getContext("2d");
|
||||||
ctx.lineTo(x1, y1);
|
if (fill) {
|
||||||
ctx.fill();
|
ctx.fillStyle = c.rgba();
|
||||||
$End If
|
} else {
|
||||||
|
ctx.strokeStyle = c.rgba();
|
||||||
|
ctx.lineWidth = QB.defaultLineWidth();
|
||||||
|
}
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x1, y1);
|
||||||
|
ctx.lineTo(x2, y2);
|
||||||
|
ctx.lineTo(x3, y3);
|
||||||
|
ctx.lineTo(x1, y1);
|
||||||
|
if (fill) {
|
||||||
|
ctx.fill();
|
||||||
|
} else {
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
$End If
|
||||||
|
End Sub
|
||||||
|
|
||||||
|
Sub RoundRect (x As Long, y As Long, w As Long, h As Long, radius As Integer, clr As _Unsigned Long)
|
||||||
|
_RoundRect x, y, w, h, radius, clr, false
|
||||||
|
End Sub
|
||||||
|
|
||||||
|
Sub FillRoundRect (x As Long, y As Long, w As Long, h As Long, radius As Integer, clr As _Unsigned Long)
|
||||||
|
_RoundRect x, y, w, h, radius, clr, true
|
||||||
|
End Sub
|
||||||
|
|
||||||
|
Sub _RoundRect (x As Long, y As Long, w As Long, h As Long, radius As Integer, clr As _Unsigned Long, fill)
|
||||||
|
Dim destImg As Long
|
||||||
|
destImg = _Dest
|
||||||
|
|
||||||
|
If clr = undefined Then
|
||||||
|
clr = _DefaultColor
|
||||||
|
End If
|
||||||
|
|
||||||
|
$If Javascript Then
|
||||||
|
var c = QB.colorToRGB(clr);
|
||||||
|
var ctx = QB.getImage(destImg).getContext("2d");
|
||||||
|
if (fill) {
|
||||||
|
ctx.fillStyle = c.rgba();
|
||||||
|
} else {
|
||||||
|
ctx.strokeStyle = c.rgba();
|
||||||
|
ctx.lineWidth = QB.defaultLineWidth();
|
||||||
|
}
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.roundRect(x, y, w, h, radius);
|
||||||
|
if (fill) {
|
||||||
|
ctx.fill();
|
||||||
|
} else {
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
$End If
|
||||||
|
End Sub
|
||||||
|
|
||||||
|
Sub Shadow (clr As Long, offsetX As Long, offsetY As Long, blur As Long)
|
||||||
|
Dim destImg As Long
|
||||||
|
destImg = _Dest
|
||||||
|
|
||||||
|
If offsetX = undefined Then
|
||||||
|
offsetX = 0
|
||||||
|
End If
|
||||||
|
If offsetY = undefined Then
|
||||||
|
offsetY = 0
|
||||||
|
End If
|
||||||
|
If blur = undefined Then
|
||||||
|
blur = 0
|
||||||
|
End If
|
||||||
|
If clr = undefined Then
|
||||||
|
clr = _DefaultColor
|
||||||
|
End If
|
||||||
|
|
||||||
|
$If Javascript Then
|
||||||
|
var c = QB.colorToRGB(clr);
|
||||||
|
var ctx = QB.getImage(destImg).getContext("2d");
|
||||||
|
ctx.shadowBlur = blur;
|
||||||
|
ctx.shadowColor = c.rgba();
|
||||||
|
ctx.shadowOffsetX = offsetX;
|
||||||
|
ctx.shadowOffsetY = offsetY;
|
||||||
|
$End If
|
||||||
|
End Sub
|
||||||
|
|
||||||
|
Sub ShadowOff
|
||||||
|
Dim destImg As Long
|
||||||
|
destImg = _Dest
|
||||||
|
|
||||||
|
$If Javascript Then
|
||||||
|
var ctx = QB.getImage(destImg).getContext("2d");
|
||||||
|
ctx.shadowBlur = 0;
|
||||||
|
ctx.shadowColor = "#000";
|
||||||
|
ctx.shadowOffsetX = 0;
|
||||||
|
ctx.shadowOffsetY = 0;
|
||||||
|
$End If
|
||||||
|
End Sub
|
||||||
|
|
||||||
|
Sub LineWidth (w As Long)
|
||||||
|
$If Javascript Then
|
||||||
|
QB.defaultLineWidth(w);
|
||||||
|
$End If
|
||||||
|
End Sub
|
||||||
|
|
||||||
|
Function LineWidth
|
||||||
|
$If Javascript Then
|
||||||
|
LineWidth = QB.defaultLineWidth();
|
||||||
|
$End If
|
||||||
|
End Function
|
||||||
|
|
||||||
|
Sub LineCap (cap As String)
|
||||||
|
$If Javascript Then
|
||||||
|
var ctx = QB.getImage(QB.func__Dest()).getContext("2d");
|
||||||
|
ctx.lineCap = cap;
|
||||||
|
$End If
|
||||||
|
End Sub
|
||||||
|
|
||||||
|
Function LineCap
|
||||||
|
$If Javascript Then
|
||||||
|
var ctx = QB.getImage(QB.func__Dest()).getContext("2d");
|
||||||
|
LineCap = ctx.lineCap;
|
||||||
|
$End If
|
||||||
|
End Function
|
||||||
|
|
||||||
|
Sub Curve (sx As Long, sy As Long, cx As Long, cy As Long, ex As Long, ey as Long, clr As _Unsigned Long)
|
||||||
|
If clr = undefined Then
|
||||||
|
clr = _DefaultColor
|
||||||
|
End If
|
||||||
|
|
||||||
|
$If Javascript Then
|
||||||
|
var c = QB.colorToRGB(clr);
|
||||||
|
var ctx = QB.getImage(QB.func__Dest()).getContext("2d");
|
||||||
|
ctx.strokeStyle = c.rgba();
|
||||||
|
ctx.lineWidth = QB.defaultLineWidth();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(sx, sy);
|
||||||
|
ctx.quadraticCurveTo(cx, cy, ex, ey);
|
||||||
|
ctx.stroke();
|
||||||
|
$End If
|
||||||
|
End Sub
|
||||||
|
|
||||||
|
Sub Bezier (sx As Long, sy As Long, cx1 As Long, cy1 As Long, cx2 As Long, cy2 As Long, ex As Long, ey as Long, clr As _Unsigned Long)
|
||||||
|
If clr = undefined Then
|
||||||
|
clr = _DefaultColor
|
||||||
|
End If
|
||||||
|
|
||||||
|
$If Javascript Then
|
||||||
|
var c = QB.colorToRGB(clr);
|
||||||
|
var ctx = QB.getImage(QB.func__Dest()).getContext("2d");
|
||||||
|
ctx.strokeStyle = c.rgba();
|
||||||
|
ctx.lineWidth = QB.defaultLineWidth();
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(sx, sy);
|
||||||
|
ctx.bezierCurveTo(cx1, cy1, cx2, cy2, ex, ey);
|
||||||
|
ctx.stroke();
|
||||||
|
$End If
|
||||||
End Sub
|
End Sub
|
||||||
Loading…
Reference in a new issue