LibWeb: Add canvas.quadraticCurveTo()

Also adds a test, and removes debug spam ™️
This commit is contained in:
AnotherTest 2020-05-05 06:54:26 +04:30 committed by Andreas Kling
parent 9f3f98d4c0
commit 0a55679de4
Notes: sideshowbarker 2024-07-19 06:58:33 +09:00
7 changed files with 70 additions and 2 deletions

View 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>

View file

@ -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>

View file

@ -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(' ');

View file

@ -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);

View file

@ -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&);

View file

@ -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;

View file

@ -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;