如何在JavaFX中使用缩放图像和绘制多边形

Question

我正在尝试制作一个在Image上绘制多边形的程序，我们可以在单击缩放按钮后缩放图像和多边形。 单击缩放按钮后，图像裁剪。为了避免这个问题，我使用的是stackpane。

我尝试设置AnchorPane的X和Y比例，这完全能够缩放图像和多边形，但多边形在窗格中并不完美。 Image的顶部和右侧离开了Pane。

我尝试使用Canvas设置X和Y Scale，但只有Image是缩放而不是绘制Polygon。

getView().getCanvas().setScaleX(getView().getCanvas().getScaleX() * zoomFactor);
getView().getCanvas().setScaleY(getView().getCanvas().getScaleY() * zoomFactor);

要缩放图像和绘制多边形，我需要建议使用API​​。

    private void setImageAndCanvas() { 
                scrollPane = new ScrollPane(); 
                anchorPane = new AnchorPane(); 
                canvas = new Canvas(screenWidth/2, screenHeight-120); 
                gridLines = new ArrayList<Line>(); 
                imageSections = new ArrayList<Polygon>(); 
                scrollPane.setContent(anchorPane); 
                anchorPane.getChildren().add(canvas); 
                scrollPane.setPrefSize(screenWidth/2, screenHeight-120); 
        }

`public void setCanvas(Canvas canvas, Image img){
        graphicsContext.drawImage(img, 0, 0, canvas.getWidth(), canvas.getHeight());
    }`

    private void zoom(double zoomFactor) {
        zoomWidth.set(zoomWidth.get() * zoomFactor);
        zoomHeight.set(zoomHeight.get() * zoomFactor);
        getView().getAnchorPane().setScaleX(getView().getAnchorPane().getScaleX() * zoomFactor);
        getView().getAnchorPane().setScaleY(getView().getAnchorPane().getScaleY() * zoomFactor);
        zoomCounter = zoomFactor>1 ? ++zoomCounter: --zoomCounter;
        if (zoomCounter > 0 && zoomCounter < 3) {
            getView().getZoomIn().setDisable(false);
            getView().getZoomOut().setDisable(false);
        }
    }

    public void zoomOutAction(ActionEvent event) {
        zoom(1/zoomFactor);
        event.consume();
    }

    private void drawAllImageSections(){
        if(getView().getImageNameTablePane().getSelectedItem()!=null){
            String imageName = getView().getImageNameTablePane().getSelectedItem().getImageName();
            List<QiImageSectionPoint> polygonPoints = getModel().showAllImageSection(imageName);
            if(!polygonPoints.isEmpty()){
                List<Double> allPointsList = new ArrayList<Double>();
                double resizeWidthPercent = ((getView().getScreenWidth()/2)-500)/5;
                double resizeHeightPercent = ((getView().getScreenHeight()-120)-500)/5;
                polygon = new Polygon();
                for(int i = 0; i<polygonPoints.size(); i++){
                    int imageSectionId = polygonPoints.get(i).getImageSectionId();
                    if((i+1)<polygonPoints.size() && imageSectionId == polygonPoints.get(i+1).getImageSectionId()){
                        allPointsList.add((double) polygonPoints.get(i).getPointX()+((polygonPoints.get(i).getPointX()*resizeWidthPercent)/100));
                        allPointsList.add((double) polygonPoints.get(i).getPointY()+((polygonPoints.get(i).getPointY()*resizeHeightPercent)/100));
                    }else{
                        allPointsList.add((double) polygonPoints.get(i).getPointX()+((polygonPoints.get(i).getPointX()*resizeWidthPercent)/100));
                        allPointsList.add((double) polygonPoints.get(i).getPointY()+((polygonPoints.get(i).getPointY()*resizeHeightPercent)/100));
                        polygon.getPoints().setAll(allPointsList);
                        polygon.setFill(null);
                        polygon.setStroke(lineColor);
                        polygon.setStrokeWidth(lineWidth);
                        getView().getImageSections().add(polygon);
                        allPointsList = new ArrayList<Double>();
                        polygon = new Polygon();
                    }
                }
            }
        }
        if(getView().getImageSections()!=null)
        getView().getAnchorPane().getChildren().addAll(getView().getImageSections());
    }