diff options
author | AnotherTest <ali.mpfard@gmail.com> | 2020-05-05 06:54:26 +0430 |
---|---|---|
committer | Andreas Kling <kling@serenityos.org> | 2020-05-05 09:21:07 +0200 |
commit | 0a55679de465d770767de36da8fefb573644d86e (patch) | |
tree | c1ccec5b32f96b9373559306c9bbb35a36090e12 | |
parent | 9f3f98d4c0c111496e35010ae3488dc172da56db (diff) | |
download | serenity-0a55679de465d770767de36da8fefb573644d86e.zip |
LibWeb: Add canvas.quadraticCurveTo()
Also adds a test, and removes debug spam :tm:
-rw-r--r-- | Base/home/anon/www/canvas-path-quadratic-curve.html | 44 | ||||
-rw-r--r-- | Base/home/anon/www/welcome.html | 1 | ||||
-rw-r--r-- | Libraries/LibGfx/Path.cpp | 4 | ||||
-rw-r--r-- | Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp | 14 | ||||
-rw-r--r-- | Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h | 1 | ||||
-rw-r--r-- | Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp | 7 | ||||
-rw-r--r-- | Libraries/LibWeb/DOM/CanvasRenderingContext2D.h | 1 |
7 files changed, 70 insertions, 2 deletions
diff --git a/Base/home/anon/www/canvas-path-quadratic-curve.html b/Base/home/anon/www/canvas-path-quadratic-curve.html new file mode 100644 index 0000000000..88e05239c2 --- /dev/null +++ b/Base/home/anon/www/canvas-path-quadratic-curve.html @@ -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> diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html index 77b1747388..d9ed0eb87a 100644 --- a/Base/home/anon/www/welcome.html +++ b/Base/home/anon/www/welcome.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> diff --git a/Libraries/LibGfx/Path.cpp b/Libraries/LibGfx/Path.cpp index da6c9358db..fa06b904f7 100644 --- a/Libraries/LibGfx/Path.cpp +++ b/Libraries/LibGfx/Path.cpp @@ -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(' '); diff --git a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp index 7bd496a139..bc3bfd4629 100644 --- a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp +++ b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp @@ -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); diff --git a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h index 310f0c2588..c6872fc9a2 100644 --- a/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h +++ b/Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h @@ -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&); diff --git a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp index 8359cbaf44..12a2791482 100644 --- a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp +++ b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp @@ -165,10 +165,13 @@ void CanvasRenderingContext2D::line_to(float x, float y) m_path.line_to({ x, y }); } -void CanvasRenderingContext2D::stroke() +void CanvasRenderingContext2D::quadratic_curve_to(float cx, float cy, float x, float y) { - dbg() << "stroke path " << m_path; + m_path.quadratic_bezier_curve_to({ cx, cy }, { x, y }); +} +void CanvasRenderingContext2D::stroke() +{ auto painter = this->painter(); if (!painter) return; diff --git a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h index 2b46422d60..c3bb5a9d1f 100644 --- a/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h +++ b/Libraries/LibWeb/DOM/CanvasRenderingContext2D.h @@ -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; |