java - Draw Cartesian Plane Graphi with canvas in JavaFX -


i have method draw cartesian plane in javafx, using canvas

    public class grafics extends stackpane {         private canvas canvas;             public void grafics(){               gridpane grid = new gridpane();             grid.setpadding(new insets(5));             grid.sethgap(10);             grid.setvgap(10);                           canvas = new canvas();             canvas.setheight(500);             canvas.setwidth(700);             gridpane.sethalignment(canvas, hpos.center);             grid.add(canvas, 0, 2);              graphicscontext gc = canvas.getgraphicscontext2d();             gc.setfill(color.black);             gc.fillrect(0, 0, canvas.getwidth(), canvas.getheight());             gc.setfill(color.white);             gc.fillrect(1, 1, canvas.getwidth() - 2, canvas.getheight() - 2);             drawaxesxy(gc); //call method drawaxes             getchildren().addall(grid);// add gridpane in stackpane          }    private void drawaxesxy(graphicscontext gc1) {              gc1 = canvas.getgraphicscontext2d().getpixelwriter();                pixelwriter pixelwriter = gc1.getpixelwriter();              gc1.setfill(color.black);             gc1.setstroke(color.black);             gc1.setlinewidth(1.5);             gc1.stroketext("y", 350, 30);             gc1.scale(1, 1);               gc1.translate((canvas.getheight() / 50) - (canvas.getwidth() / 10), canvas.getheight() / 50);            gc1.strokeline(canvas.getwidth() - 300, canvas.getwidth() - 300, canvas.getheight() - 100, canvas.getheight() / 30) ;            pixelwriter.setcolor(300, 300, color.red); //use here              gc1.stroketext("x", 620, 220);              gc1.translate(canvas.getwidth() - (canvas.getheight() / 10), -220);            gc1.rotate(90.0);            gc1.setfill(color.black);            gc1.setstroke(color.black);            gc1.setlinewidth(1.5);            gc1.strokeline(canvas.getwidth() - 250, canvas.getwidth() - 250,                                     canvas.getheight() - 50, canvas.getheight() / 30);             pixelwriter.setcolor(620, 220, color.red);//use here                                  }                             } 

this draw of codes http://postimg.org/image/uipe1mgyb/

and wanna draw exemples http://postimg.org/image/98k9mvnb3/

in other post, recommended me use pixelwriter write pixels in canvas, use it´s don´t nothing.

i think method i'm using draw cartesian plane using canvas in javafx not correct, not have method draw cartesian plane in javafx, without using pixelwriter

or how draw cartesian plane canvas in javafx , show coordinates of axes (x, y) axes , (-x,-y), example

i'd advise using scene graph , built-in numberaxis nodes rather writing own cartesian axis renderer using canvas.

sample plot

the code below not meant general purpose function plotter, instead provides illustrative sample of how might create one.

import javafx.application.application; import javafx.beans.binding.bindings; import javafx.geometry.*; import javafx.scene.scene; import javafx.scene.chart.numberaxis; import javafx.scene.layout.*; import javafx.scene.paint.color; import javafx.scene.shape.*; import javafx.stage.stage;  import java.util.function.function;  // java 8 code public class cartesianplot extends application {      public static void main(string[] args) {         launch(args);     }      @override     public void start(final stage stage) {         axes axes = new axes(                 400, 300,                 -8, 8, 1,                 -6, 6, 1         );          plot plot = new plot(                 x -> .25 * (x + 4) * (x + 1) * (x - 2),                 -8, 8, 0.1,                 axes         );          stackpane layout = new stackpane(                 plot         );         layout.setpadding(new insets(20));         layout.setstyle("-fx-background-color: rgb(35, 39, 50);");          stage.settitle("y = \u00bc(x+4)(x+1)(x-2)");         stage.setscene(new scene(layout, color.rgb(35, 39, 50)));         stage.show();     }      class axes extends pane {         private numberaxis xaxis;         private numberaxis yaxis;          public axes(                 int width, int height,                 double xlow, double xhi, double xtickunit,                 double ylow, double yhi, double ytickunit         ) {             setminsize(pane.use_pref_size, pane.use_pref_size);             setprefsize(width, height);             setmaxsize(pane.use_pref_size, pane.use_pref_size);              xaxis = new numberaxis(xlow, xhi, xtickunit);             xaxis.setside(side.bottom);             xaxis.setminortickvisible(false);             xaxis.setprefwidth(width);             xaxis.setlayouty(height / 2);              yaxis = new numberaxis(ylow, yhi, ytickunit);             yaxis.setside(side.left);             yaxis.setminortickvisible(false);             yaxis.setprefheight(height);             yaxis.layoutxproperty().bind(                 bindings.subtract(                     (width / 2) + 1,                     yaxis.widthproperty()                 )             );              getchildren().setall(xaxis, yaxis);         }          public numberaxis getxaxis() {             return xaxis;         }          public numberaxis getyaxis() {             return yaxis;         }     }      class plot extends pane {         public plot(                 function<double, double> f,                 double xmin, double xmax, double xinc,                 axes axes         ) {             path path = new path();             path.setstroke(color.orange.derivecolor(0, 1, 1, 0.6));             path.setstrokewidth(2);              path.setclip(                     new rectangle(                             0, 0,                              axes.getprefwidth(),                              axes.getprefheight()                     )             );              double x = xmin;             double y = f.apply(x);              path.getelements().add(                     new moveto(                             mapx(x, axes), mapy(y, axes)                     )             );              x += xinc;             while (x < xmax) {                 y = f.apply(x);                  path.getelements().add(                         new lineto(                                 mapx(x, axes), mapy(y, axes)                         )                 );                  x += xinc;             }              setminsize(pane.use_pref_size, pane.use_pref_size);             setprefsize(axes.getprefwidth(), axes.getprefheight());             setmaxsize(pane.use_pref_size, pane.use_pref_size);              getchildren().setall(axes, path);         }          private double mapx(double x, axes axes) {             double tx = axes.getprefwidth() / 2;             double sx = axes.getprefwidth() /                 (axes.getxaxis().getupperbound() -                  axes.getxaxis().getlowerbound());              return x * sx + tx;         }          private double mapy(double y, axes axes) {             double ty = axes.getprefheight() / 2;             double sy = axes.getprefheight() /                  (axes.getyaxis().getupperbound() -                   axes.getyaxis().getlowerbound());              return -y * sy + ty;         }     } } 

another user took code above , created sample able plot arbitrary functions typed in user. functions parsed using shunting-yard algorithm:


Comments

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

openid - Okta: Failed to get authorization code through API call -

ios - Change Storyboard View using Seague -