We use cookies to ensure you get the best experience on our website
Trang chủ Khám phá Trợ giúp
Đăng ký Đăng nhập
0ct0pu5
/
ladybird
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Browse Source

LibWeb: Add some basic path drawing functionality to the canvas element

This patch adds the following methods to CanvasRenderingContext2D:

- beginPath()
- moveTo(x, y)
- lineTo(x, y)
- closePath()
- stroke()

We also add the lineWidth property. :^)
Andreas Kling 5 năm trước cách đây
mục cha
60c2e41079
commit
0d93e249c3
6 tập tin đã thay đổi với 163 bổ sung và 0 xóa
Split View Hiển thị tình trạng sai khác
  1. 40 0
      Base/home/anon/www/canvas-path.html
  2. 1 0
      Base/home/anon/www/welcome.html
  3. 71 0
      Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp
  4. 7 0
      Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h
  5. 31 0
      Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp
  6. 13 0
      Libraries/LibWeb/DOM/CanvasRenderingContext2D.h

+ 40 - 0
Base/home/anon/www/canvas-path.html
Xem Tập Tin 

@@ -0,0 +1,40 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head></title>
 
+<body>
 
+<canvas width=300 height=300></canvas>
 
+<script>
 
+
 
+function drawHouse() {
 
+
 
+var ctx = document.querySelectorAll("canvas")[0].getContext("2d");
 
+ctx.fillStyle = 'black';
 
+ctx.fillRect(0, 0, 300, 300);
 
+
 
+ctx.fillStyle = 'white';
 
+ctx.strokeStyle = 'red';
 
+
 
+// Set line width
 
+ctx.lineWidth = 10;
 
+
 
+// Wall
 
+ctx.strokeRect(75, 140, 150, 110);
 
+
 
+// Door
 
+ctx.fillRect(130, 190, 40, 60);
 
+
 
+// Roof
 
+ctx.beginPath();
 
+ctx.moveTo(50, 140);
 
+ctx.lineTo(150, 60);
 
+ctx.lineTo(250, 140);
 
+ctx.closePath();
 
+ctx.stroke();
 
+
 
+}
 
+
 
+drawHouse();
 
+
 
+</script>
 
+</body>
 
+</html>

+ 1 - 0
Base/home/anon/www/welcome.html
Xem Tập Tin 

@@ -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.html">canvas path house!</a></li>
 
         <li><a href="img-canvas.html">canvas drawImage() test</a></li>
 
         <li><a href="trigonometry.html">canvas + trigonometry functions</a></li>
 
         <li><a href="qsa.html">querySelectorAll test</a></li>

+ 71 - 0
Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.cpp
Xem Tập Tin 

@@ -53,6 +53,14 @@ CanvasRenderingContext2DWrapper::CanvasRenderingContext2DWrapper(CanvasRendering
 
     put_native_property("strokeStyle", stroke_style_getter, stroke_style_setter);
 
     put_native_function("strokeRect", stroke_rect, 4);
 
     put_native_function("drawImage", draw_image, 3);
 
+
 
+    put_native_function("beginPath", begin_path, 0);
 
+    put_native_function("closePath", close_path, 0);
 
+    put_native_function("stroke", stroke, 0);
 
+    put_native_function("moveTo", move_to, 0);
 
+    put_native_function("lineTo", line_to, 0);
 
+
 
+    put_native_property("lineWidth", line_width_getter, line_width_setter);
 
 }
 
 
 CanvasRenderingContext2DWrapper::~CanvasRenderingContext2DWrapper()
 
@@ -162,5 +170,68 @@ void CanvasRenderingContext2DWrapper::stroke_style_setter(JS::Interpreter& inter
 
         impl->set_stroke_style(value.to_string());
 
 }
 
 
+JS::Value CanvasRenderingContext2DWrapper::line_width_getter(JS::Interpreter& interpreter)
 
+{
 
+    auto* impl = impl_from(interpreter);
 
+    if (!impl)
 
+        return {};
 
+    return JS::Value(impl->line_width());
 
+}
 
+
 
+void CanvasRenderingContext2DWrapper::line_width_setter(JS::Interpreter& interpreter, JS::Value value)
 
+{
 
+    if (auto* impl = impl_from(interpreter))
 
+        impl->set_line_width(value.to_double());
 
+}
 
+
 
+JS::Value CanvasRenderingContext2DWrapper::begin_path(JS::Interpreter& interpreter)
 
+{
 
+    auto* impl = impl_from(interpreter);
 
+    if (!impl)
 
+        return {};
 
+    impl->begin_path();
 
+    return JS::js_undefined();
 
+}
 
+
 
+JS::Value CanvasRenderingContext2DWrapper::close_path(JS::Interpreter& interpreter)
 
+{
 
+    auto* impl = impl_from(interpreter);
 
+    if (!impl)
 
+        return {};
 
+    impl->close_path();
 
+    return JS::js_undefined();
 
+}
 
+
 
+JS::Value CanvasRenderingContext2DWrapper::stroke(JS::Interpreter& interpreter)
 
+{
 
+    auto* impl = impl_from(interpreter);
 
+    if (!impl)
 
+        return {};
 
+    impl->stroke();
 
+    return JS::js_undefined();
 
+}
 
+
 
+JS::Value CanvasRenderingContext2DWrapper::move_to(JS::Interpreter& interpreter)
 
+{
 
+    auto* impl = impl_from(interpreter);
 
+    if (!impl)
 
+        return {};
 
+    double x = interpreter.argument(0).to_double();
 
+    double y = interpreter.argument(1).to_double();
 
+    impl->move_to(x, y);
 
+    return JS::js_undefined();
 
+}
 
+
 
+JS::Value CanvasRenderingContext2DWrapper::line_to(JS::Interpreter& interpreter)
 
+{
 
+    auto* impl = impl_from(interpreter);
 
+    if (!impl)
 
+        return {};
 
+    double x = interpreter.argument(0).to_double();
 
+    double y = interpreter.argument(1).to_double();
 
+    impl->line_to(x, y);
 
+    return JS::js_undefined();
 
+}
 
+
 
 }
 
 }

+ 7 - 0
Libraries/LibWeb/Bindings/CanvasRenderingContext2DWrapper.h
Xem Tập Tin 

@@ -51,6 +51,13 @@ private:
 
     static void fill_style_setter(JS::Interpreter&, JS::Value);
 
     static JS::Value stroke_style_getter(JS::Interpreter&);
 
     static void stroke_style_setter(JS::Interpreter&, JS::Value);
 
+    static JS::Value line_width_getter(JS::Interpreter&);
 
+    static void line_width_setter(JS::Interpreter&, JS::Value);
 
+    static JS::Value begin_path(JS::Interpreter&);
 
+    static JS::Value close_path(JS::Interpreter&);
 
+    static JS::Value stroke(JS::Interpreter&);
 
+    static JS::Value move_to(JS::Interpreter&);
 
+    static JS::Value line_to(JS::Interpreter&);
 
 
     NonnullRefPtr<CanvasRenderingContext2D> m_impl;
 
 };

+ 31 - 0
Libraries/LibWeb/DOM/CanvasRenderingContext2D.cpp
Xem Tập Tin 

@@ -134,4 +134,35 @@ OwnPtr<Gfx::Painter> CanvasRenderingContext2D::painter()
 
     return make<Gfx::Painter>(*m_element->bitmap());
 
 }
 
 
+void CanvasRenderingContext2D::begin_path()
 
+{
 
+    m_path = Gfx::Path();
 
+}
 
+
 
+void CanvasRenderingContext2D::close_path()
 
+{
 
+    m_path.close();
 
+}
 
+
 
+void CanvasRenderingContext2D::move_to(float x, float y)
 
+{
 
+    m_path.move_to({ x, y });
 
+}
 
+
 
+void CanvasRenderingContext2D::line_to(float x, float y)
 
+{
 
+    m_path.line_to({ x, y });
 
+}
 
+
 
+void CanvasRenderingContext2D::stroke()
 
+{
 
+    dbg() << "stroke path " << m_path;
 
+
 
+    auto painter = this->painter();
 
+    if (!painter)
 
+        return;
 
+
 
+    painter->stroke_path(m_path, m_stroke_style, m_line_width);
 
+}
 
+
 
 }

+ 13 - 0
Libraries/LibWeb/DOM/CanvasRenderingContext2D.h
Xem Tập Tin 

@@ -30,6 +30,7 @@
 
 #include <LibGfx/AffineTransform.h>
 
 #include <LibGfx/Color.h>
 
 #include <LibGfx/Forward.h>
 
+#include <LibGfx/Path.h>
 
 #include <LibWeb/Bindings/Wrappable.h>
 
 
 namespace Web {
 
@@ -61,6 +62,15 @@ public:
 
     void scale(float sx, float sy);
 
     void translate(float x, float y);
 
 
+    void set_line_width(float line_width) { m_line_width = line_width; }
 
+    float line_width() const { return m_line_width; }
 
+
 
+    void begin_path();
 
+    void close_path();
 
+    void move_to(float x, float y);
 
+    void line_to(float x, float y);
 
+    void stroke();
 
+
 
 private:
 
     explicit CanvasRenderingContext2D(HTMLCanvasElement&);
 
 
@@ -73,6 +83,9 @@ private:
 
     Gfx::AffineTransform m_transform;
 
     Gfx::Color m_fill_style;
 
     Gfx::Color m_stroke_style;
 
+    float m_line_width { 1 };
 
+
 
+    Gfx::Path m_path;
 
 };
 
 
 }

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5