mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-11-22 23:50:19 +00:00
LibWeb: Add canvas.quadraticCurveTo()
Also adds a test, and removes debug spam ™️
This commit is contained in:
parent
9f3f98d4c0
commit
0a55679de4
Notes:
sideshowbarker
2024-07-19 06:58:33 +09:00
Author: https://github.com/alimpfard Commit: https://github.com/SerenityOS/serenity/commit/0a55679de46 Pull-request: https://github.com/SerenityOS/serenity/pull/2110
7 changed files with 70 additions and 2 deletions
44
Base/home/anon/www/canvas-path-quadratic-curve.html
Normal file
44
Base/home/anon/www/canvas-path-quadratic-curve.html
Normal file
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>canvas path - quadratic curve example</title>
|
||||
</head>
|
||||
<body>
|
||||
<canvas width=500 height=500></canvas>
|
||||
<script>
|
||||
|
||||
function drawSomeCurves() {
|
||||
|
||||
var canvas = document.querySelectorAll("canvas")[0];
|
||||
var ctx = canvas.getContext("2d");
|
||||
var x = 150;
|
||||
var y = 150;
|
||||
|
||||
canvas.addEventListener("mousedown", function(e) {
|
||||
x = e.offsetX;
|
||||
y = e.offsetY;
|
||||
});
|
||||
|
||||
canvas.addEventListener("mousemove", function(e) {
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fillRect(0, 0, 500, 500);
|
||||
|
||||
ctx.strokeStyle = 'red';
|
||||
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
ctx.fillRect(0, 0, 500, 500);
|
||||
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.quadraticCurveTo(e.offsetX, e.offsetY, x, y);
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
drawSomeCurves();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -28,6 +28,7 @@ span#ua {
|
|||
<p>Your user agent is: <b><span id="ua"></span></b></p>
|
||||
<p>Some small test pages:</p>
|
||||
<ul>
|
||||
<li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li>
|
||||
<li><a href="pngsuite_siz_png.html">pngsuite odd sizes test</a></li>
|
||||
<li><a href="pngsuite_bas_png.html">pngsuite basic formats test</a></li>
|
||||
<li><a href="canvas-path.html">canvas path house!</a></li>
|
||||
|
|
|
@ -68,6 +68,10 @@ String Path::to_string() const
|
|||
}
|
||||
builder.append('(');
|
||||
builder.append(segment.point.to_string());
|
||||
if (segment.through.has_value()) {
|
||||
builder.append(", ");
|
||||
builder.append(segment.through.value().to_string());
|
||||
}
|
||||
builder.append(')');
|
||||
|
||||
builder.append(' ');
|
||||
|
|
|
@ -63,6 +63,7 @@ CanvasRenderingContext2DWrapper::CanvasRenderingContext2DWrapper(CanvasRendering
|
|||
put_native_function("stroke", stroke, 0);
|
||||
put_native_function("moveTo", move_to, 2);
|
||||
put_native_function("lineTo", line_to, 2);
|
||||
put_native_function("quadraticCurveTo", quadratic_curve_to, 4);
|
||||
|
||||
put_native_function("createImageData", create_image_data, 1);
|
||||
put_native_function("putImageData", put_image_data, 3);
|
||||
|
@ -240,6 +241,19 @@ JS::Value CanvasRenderingContext2DWrapper::line_to(JS::Interpreter& interpreter)
|
|||
return JS::js_undefined();
|
||||
}
|
||||
|
||||
JS::Value CanvasRenderingContext2DWrapper::quadratic_curve_to(JS::Interpreter& interpreter)
|
||||
{
|
||||
auto* impl = impl_from(interpreter);
|
||||
if (!impl)
|
||||
return {};
|
||||
double cx = interpreter.argument(0).to_double();
|
||||
double cy = interpreter.argument(1).to_double();
|
||||
double x = interpreter.argument(2).to_double();
|
||||
double y = interpreter.argument(3).to_double();
|
||||
impl->quadratic_curve_to(cx, cy, x, y);
|
||||
return JS::js_undefined();
|
||||
}
|
||||
|
||||
JS::Value CanvasRenderingContext2DWrapper::create_image_data(JS::Interpreter& interpreter)
|
||||
{
|
||||
auto* impl = impl_from(interpreter);
|
||||
|
|
|
@ -58,6 +58,7 @@ private:
|
|||
static JS::Value stroke(JS::Interpreter&);
|
||||
static JS::Value move_to(JS::Interpreter&);
|
||||
static JS::Value line_to(JS::Interpreter&);
|
||||
static JS::Value quadratic_curve_to(JS::Interpreter&);
|
||||
|
||||
static JS::Value create_image_data(JS::Interpreter&);
|
||||
static JS::Value put_image_data(JS::Interpreter&);
|
||||
|
|
|
@ -165,10 +165,13 @@ void CanvasRenderingContext2D::line_to(float x, float y)
|
|||
m_path.line_to({ x, y });
|
||||
}
|
||||
|
||||
void CanvasRenderingContext2D::quadratic_curve_to(float cx, float cy, float x, float y)
|
||||
{
|
||||
m_path.quadratic_bezier_curve_to({ cx, cy }, { x, y });
|
||||
}
|
||||
|
||||
void CanvasRenderingContext2D::stroke()
|
||||
{
|
||||
dbg() << "stroke path " << m_path;
|
||||
|
||||
auto painter = this->painter();
|
||||
if (!painter)
|
||||
return;
|
||||
|
|
|
@ -69,6 +69,7 @@ public:
|
|||
void close_path();
|
||||
void move_to(float x, float y);
|
||||
void line_to(float x, float y);
|
||||
void quadratic_curve_to(float cx, float cy, float x, float y);
|
||||
void stroke();
|
||||
|
||||
RefPtr<ImageData> create_image_data(JS::GlobalObject&, int width, int height) const;
|
||||
|
|
Loading…
Reference in a new issue