diff --git a/examples/wasm-demo/src/func_plot.rs b/examples/wasm-demo/src/func_plot.rs index 7c966cd4..09eb95cd 100644 --- a/examples/wasm-demo/src/func_plot.rs +++ b/examples/wasm-demo/src/func_plot.rs @@ -10,6 +10,7 @@ pub fn draw(canvas_id: &str, power: i32) -> DrawResult Op root.fill(&WHITE)?; let mut chart = ChartBuilder::on(&root) + .margin(20) .caption(format!("y=x^{}", power), font) .x_label_area_size(30) .y_label_area_size(30) diff --git a/examples/wasm-demo/start-server.bat b/examples/wasm-demo/start-server.bat index b690a398..aee88705 100644 --- a/examples/wasm-demo/start-server.bat +++ b/examples/wasm-demo/start-server.bat @@ -4,5 +4,5 @@ wasm-pack build --release if errorlevel 1 cargo install wasm-pack wasm-pack build --release cd www -npm install +call npm install npm start diff --git a/examples/wasm-demo/www/index.html b/examples/wasm-demo/www/index.html index ca1357dd..30fc1693 100644 --- a/examples/wasm-demo/www/index.html +++ b/examples/wasm-demo/www/index.html @@ -12,7 +12,7 @@

Plotters WebAssembly Demo

- +
Loading WebAssembly...
diff --git a/examples/wasm-demo/www/index.js b/examples/wasm-demo/www/index.js index abec4ac4..f6abb18c 100644 --- a/examples/wasm-demo/www/index.js +++ b/examples/wasm-demo/www/index.js @@ -30,24 +30,31 @@ function setupUI() { /** Setup canvas to properly handle high DPI and redraw current plot. */ function setupCanvas() { - const dpr = window.devicePixelRatio || 1; + const dpr = window.devicePixelRatio || 1.0; const aspectRatio = canvas.width / canvas.height; - const size = Math.min(canvas.width, canvas.parentNode.offsetWidth); + const size = canvas.parentNode.offsetWidth * 0.8; canvas.style.width = size + "px"; canvas.style.height = size / aspectRatio + "px"; - canvas.width = size * dpr; - canvas.height = size / aspectRatio * dpr; - canvas.getContext("2d").scale(dpr, dpr); + canvas.width = size; + canvas.height = size / aspectRatio; updatePlot(); } /** Update displayed coordinates. */ function onMouseMove(event) { if (chart) { - const point = chart.coord(event.offsetX, event.offsetY); - coord.innerText = (point) - ? `(${point.x.toFixed(3)}, ${point.y.toFixed(3)})` - : "Mouse pointer is out of range"; + var text = "Mouse pointer is out of range"; + + if(event.target == canvas) { + let actualRect = canvas.getBoundingClientRect(); + let logicX = event.offsetX * canvas.width / actualRect.width; + let logicY = event.offsetY * canvas.height / actualRect.height; + const point = chart.coord(logicX, logicY); + text = (point) + ? `(${point.x.toFixed(3)}, ${point.y.toFixed(3)})` + : text; + } + coord.innerText = text; } } diff --git a/plotters-doc-data b/plotters-doc-data index e8846b4f..e351c6f4 160000 --- a/plotters-doc-data +++ b/plotters-doc-data @@ -1 +1 @@ -Subproject commit e8846b4fe13cf4c1bf08d9ef7340e59204d8424b +Subproject commit e351c6f44636279b95662c0c5764b4a4e8303b33 diff --git a/src/drawing/backend_impl/canvas.rs b/src/drawing/backend_impl/canvas.rs index 97ec5df1..ac2d1c7e 100644 --- a/src/drawing/backend_impl/canvas.rs +++ b/src/drawing/backend_impl/canvas.rs @@ -61,6 +61,13 @@ impl CanvasBackend { pub fn with_canvas_object(canvas: HtmlCanvasElement) -> Option { Self::init_backend(canvas) } + + /// Sets the stroke style and line width in the underlying context. + fn set_line_style(&mut self, style: &impl BackendStyle) { + self.context + .set_stroke_style(&make_canvas_color(style.as_color())); + self.context.set_line_width(style.stroke_width() as f64); + } } fn make_canvas_color(color: RGBAColor) -> JsValue { @@ -73,12 +80,7 @@ impl DrawingBackend for CanvasBackend { type ErrorType = CanvasError; fn get_size(&self) -> (u32, u32) { - // Getting just canvas.width gives poor results on HighDPI screens. - let window = window().unwrap(); - let mut dpr = window.device_pixel_ratio(); - dpr = if dpr == 0.0 { 1.0 } else { dpr }; - ((self.canvas.width() as f64 / dpr) as u32, - (self.canvas.height() as f64 / dpr) as u32) + (self.canvas.width(), self.canvas.height()) } fn ensure_prepared(&mut self) -> Result<(), DrawingErrorKind> { @@ -115,9 +117,7 @@ impl DrawingBackend for CanvasBackend { return Ok(()); } - self.context - .set_stroke_style(&make_canvas_color(style.as_color())); - self.context.set_line_width(style.stroke_width() as f64); + self.set_line_style(style); self.context.begin_path(); self.context.move_to(f64::from(from.0), f64::from(from.1)); self.context.line_to(f64::from(to.0), f64::from(to.1)); @@ -145,8 +145,7 @@ impl DrawingBackend for CanvasBackend { f64::from(bottom_right.1 - upper_left.1), ); } else { - self.context - .set_stroke_style(&make_canvas_color(style.as_color())); + self.set_line_style(style); self.context.stroke_rect( f64::from(upper_left.0), f64::from(upper_left.1), @@ -168,8 +167,7 @@ impl DrawingBackend for CanvasBackend { let mut path = path.into_iter(); self.context.begin_path(); if let Some(start) = path.next() { - self.context - .set_stroke_style(&make_canvas_color(style.as_color())); + self.set_line_style(style); self.context.move_to(f64::from(start.0), f64::from(start.1)); for next in path { self.context.line_to(f64::from(next.0), f64::from(next.1)); @@ -216,8 +214,7 @@ impl DrawingBackend for CanvasBackend { self.context .set_fill_style(&make_canvas_color(style.as_color())); } else { - self.context - .set_stroke_style(&make_canvas_color(style.as_color())); + self.set_line_style(style); } self.context.begin_path(); self.context.arc( diff --git a/src/drawing/backend_impl/piston.rs b/src/drawing/backend_impl/piston.rs index 4a579056..02605fcb 100644 --- a/src/drawing/backend_impl/piston.rs +++ b/src/drawing/backend_impl/piston.rs @@ -34,6 +34,14 @@ fn make_point_pair(a: BackendCoord, b: BackendCoord, scale: f64) -> [f64; 4] { ] } +fn make_circle(center: BackendCoord, radius: u32, scale: f64) -> [f64; 4] { + circle( + center.0 as f64 * scale, + center.1 as f64 * scale, + radius as f64 * scale, + ) +} + impl<'a, 'b> PistonBackend<'a, 'b> { pub fn new(size: (u32, u32), scale: f64, context: Context, graphics: &'b mut G2d<'a>) -> Self { Self { @@ -150,7 +158,7 @@ impl<'a, 'b> DrawingBackend for PistonBackend<'a, 'b> { style: &S, fill: bool, ) -> Result<(), DrawingErrorKind> { - let rect = circle(center.0 as f64, center.1 as f64, radius as f64); + let rect = make_circle(center, radius, self.scale); if fill { ellipse( make_piston_rgba(&style.as_color()), @@ -204,3 +212,13 @@ pub fn draw_piston_window Result<(), Box