JavaFX scale canvas

I would have use a fixed pixel size canvas, which can be resized to fill a window and will increase when the window is resized.

I use my FXML SceneBuilder.

My starting point is:

FXML:

<? XML version = "1.0" encoding = "UTF-8"? >

<? import javafx.geometry. *? >

<? import javafx.scene.image. *? >

<? import javafx.scene.canvas. *? >

<? import javafx.scene.shape. *? >

<? import java.lang. *? >

<? import java.util? >

<? import javafx.scene. *? >

<? import javafx.scene.control. *? >

<? import javafx.scene.layout. *? >

"" " < MaxHeight = BorderPane" "-Infinity" maxWidth = "-infinite" minHeight = ""-infinite "minWidth ="-infinite "xmlns =" http://JavaFX.com/JavaFX/8.0.40 "xmlns:fx =" " http://JavaFX.com/fxml/1 "fx:controller =" scalingcanvas. FXMLDocumentController">

< center >

< AnchorPane BorderPane.alignment = "CENTER" >

< children >

"" < canvas fx:id = "canvas" height = "200,0" width = "200,0" AnchorPane.bottomAnchor = "0.0" AnchorPane.leftAnchor ="0.0" AnchorPane.rightAnchor = "0.0" AnchorPane.topAnchor ="0.0" / >

< / children >

< / AnchorPane >

< /Center >

< top >

< label text = 'top' BorderPane.alignment = "CENTER" / > "

< / top >

< down >

< label text = 'bottom' BorderPane.alignment = "CENTER" / > "

< / background >

< left >

< label text = 'left' BorderPane.alignment = "CENTER" / > "

< / left >

< right >

< label text = 'right' BorderPane.alignment = "CENTER" / > "

< / right >

< / BorderPane >

Controller of Java:

package scalingcanvas;

import java.net.URL;

import java.util.ResourceBundle.

Import javafx.fxml.FXML;

Import javafx.fxml.Initializable;

Import javafx.scene.canvas.Canvas;

Import javafx.scene.canvas.GraphicsContext;

Import javafx.scene.paint.Color;

/ public class FXMLDocumentController implements {bootable

@FXML

private canvas canvas;

@Override

Public Sub initialize (URL url, rb ResourceBundle) {}

System.out.printf("hi\n");

G2d GraphicsContext = canvas.getGraphicsContext2D ();

Double w = canvas.getWidth ();

Double h = canvas.getHeight ();

g2d.setFill (Color.ALICEBLUE);

g2d.fillRect (0, 0, w, h);

g2d.setStroke (Color.Blue);

g2d.strokeOval (0, 0, w, h);

g2d.strokeLine (0, 0, w, h);

g2d.strokeLine (0, h, o, 0);

}

}

Main application:

package scalingcanvas;

Import javafx.application.Application;

Import javafx.fxml.FXMLLoader;

Import javafx.scene.Parent;

Import javafx.scene.Scene;

Import javafx.stage.Stage;

SerializableAttribute public class ScalePanel extends Application {}

@Override

public void start (steps) riser Exception {}

Mother-root = FXMLLoader.load (getClass () .getResource ("FXMLDocument.fxml"));

Scene = new Scene (root);

stage.setScene (scene);

internship. Show();

}

Public Shared Sub main (String [] args) {}

Launch (args);

}

I understand why the existing code is not suitable the canvas when the window is cultivated, but what I need to add to get there?

Also I need the canvas on the scale to maintain its underlying proportions (as specified by its width in pixels and height) and also to stay centered in the lowest node including the enclosing the proportions of the node is not the same as that of the canvas.

Any help appreciated gratefully.

Based on the code I found here I finally found a solution AutoScalingStackPane.

The AutoScalingStackPane applies a scaling to scale its content to fill or proportions (preserved) to the size of StackPane. I added an AutoScale property that allows you to choose the option scale (NONE, ADAPT, scale).

If you compile in a jar it can be used (and tested) with SceneBuilder.

Given that it required only so little of code, I wonder if StackPane this could include scaling functionality directly. It seems that it could be useful and there is no API changes (only the inclusion of the additional AutoScale property)

Also posted response StackOverflow

/*
 * Based on http://gillius.org/blog/2013/02/javafx-window-scaling-on-resize.html
*/
package dsfxcontrols;

import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.scene.Node;
import javafx.scene.layout.StackPane;

/**
* A StackPane that scales its contents to fit (preserving aspect ratio),
* or fill (scaling independently in X and Y) the available area.
* 
* Note AutoScalingStackPane applies to the contents a scaling
* transformation rather than attempting to resize the contents.
* 

* If the contents is a Canvas with pixel dimension 50 by 50, after scaling the
* Canvas still will have 50 by 50 pixels and the appearance may be pixelated
* (this might be desired if the application is interfacing a camera and the
* Canvas needs to match in size the camera's CCD size).
* 

* If the content contains FX Controls then these get magnified rather than
* resized, that is all text and graphics are scaled (this might be desired for
* Point of Sale full screen applications)
* 

* 
Known Limitations
* Rescaling occurs only when the AutoScalingStackPane is resized, it does not
* occur automatically if and when the content changes size.
*
*
* @author michaelellis
*/
public class AutoScalingStackPane extends StackPane {

    /**
     * Force scale transformation to be recomputed based on the size of this
     * AutoScalingStackPane and the size of the contents.
     */
    public void rescale() {
        if (!getChildren().isEmpty()) {
            getChildren().forEach((c) -> {
                double xScale = getWidth() / c.getBoundsInLocal().getWidth();
                double yScale = getHeight() / c.getBoundsInLocal().getHeight();
                if (autoScale.get() == AutoScale.FILL) {
                    c.setScaleX(xScale);
                    c.setScaleY(yScale);
                } else if (autoScale.get() == AutoScale.FIT) {
                    double scale = Math.min(xScale, yScale);
                    c.setScaleX(scale);
                    c.setScaleY(scale);
                } else {
                    c.setScaleX(1d);
                    c.setScaleY(1d);
                }
            });
        }
    }

    private void init() {
        widthProperty().addListener((b, o, n) -> rescale());
        heightProperty().addListener((b, o, n) -> rescale());
    }

    /**
     * No argument constructor required for Externalizable (need this to work
     * with SceneBuilder).
     */
    public AutoScalingStackPane() {
        super();
        init();
    }

    /**
     * Convenience constructor that takes a content Node.
     *
     * @param content
     */
    public AutoScalingStackPane(Node content) {
        super(content);
        init();
    }

    /**
     * AutoScale scaling options:
     * {@link AutoScale#NONE}, {@link AutoScale#FILL}, {@link AutoScale#FIT}
     */
    public enum AutoScale {

        /**
         * No scaling - revert to behaviour of StackPane.
         */
        NONE,
        /**
         * Independently scaling in x and y so content fills whole region.
         */
        FILL,
        /**
         * Scale preserving content aspect ratio and center in available space.
         */
        FIT
    }

    // AutoScale Property
    private ObjectProperty autoScale = new SimpleObjectProperty(this, "autoScale",
            AutoScale.FIT);

    /**
     * AutoScalingStackPane scaling property
     *
     * @return AutoScalingStackPane scaling property
     * @see AutoScale
     */
    public ObjectProperty autoScaleProperty() {
        return autoScale;
    }

    /**
     * Get AutoScale option
     *
     * @return the AutoScale option
     * @see AutoScale
     */
    public AutoScale getAutoScale() {
        return autoScale.getValue();
    }

    /**
     * Set the AutoScale option
     *
     * @param newAutoScale
     * @see AutoScale
     *
     */
    public void setAutoScale(AutoScale newAutoScale) {
        autoScale.setValue(newAutoScale);
    }

}

Tags: Java

Similar Questions

In collaboration with the canvas. Don't fill the rectangle.

Hey, I work with the canvas.

[code]

G2d GraphicsContext;

g2d.strokeRect (x, y, w, h); Rect is drawn.

g2d.setStroke (Color.White); Strokes are white, works just as well.

g2d.setFill (Color.Blue); Nothing happens. I'm waiting for the rectangle to be filled with blue. I'm doing something wrong?

[/ code]

Thanks to you all.

Edit: lmao, try to format my text.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class CanvasFillRectTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        Canvas canvas = new Canvas(400, 400);
        GraphicsContext gc = canvas.getGraphicsContext2D();
        gc.setFill(Color.BLUE);
        gc.setStroke(Color.WHITE);
        gc.fillRect(50, 50, 300, 200);
        gc.strokeRect(50, 50, 300, 200);

        Pane pane = new Pane();
        pane.getChildren().add(canvas);
        Scene scene = new Scene(pane, 400, 400, Color.CORNFLOWERBLUE);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Edit: lmao, try to format my text.

Choose "Use the Advanced Editor" at the top... and then select your code, press the button marked "insert" >, select syntax, Java.

Multiple, overlapping nodes or canvas in a pane: the sequence of rendering problems

I have the following problem:

1 stream outside, inside the following items in the following order:
... (1) canvas (0,0,100,100)
... (2) button (0,0,100,30)
... (3) the canvas (90,90,100,100)
... (4) button (90,90,100,30)
So there is an overlapping area of 10 x 10 (between 1), (2) and (3), (4).

When moving with the mouse on the button 4 then 1-canvas is drawn on the 2 key - that is not correct.

It seems to me like a-sequence/dependency-rendering problem: moving the mouse makes again 4-button, triggering a new rendering of the Web 1 because of that overlap, but 2 buttons seems not to be re-rendering.

Is there a "thought/understanding" - problem on my side? -No suspicion is apprecaited...
Thank you!

This is the code to reproduce, when running: move the mouse on "(4) button.

package ztest;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.SceneBuilder;
import javafx.scene.canvas.Canvas;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;


public class Test_40_Canvas extends Application
{
    class MyPane extends Pane
    {
        Canvas m_canvas1;
        Button m_button2;
        Canvas m_canvas3;
        Button m_button4;
        
        public MyPane()
        {
            m_canvas1 = new Canvas();
            m_button2 = new Button();
            m_canvas3 = new Canvas();
            m_button4 = new Button();
            
            getChildren().add(m_canvas1);
            getChildren().add(m_button2);
            getChildren().add(m_canvas3);
            getChildren().add(m_button4);
            
            m_canvas1.setWidth(100);
            m_canvas1.setHeight(100);
            m_canvas1.getGraphicsContext2D().setFill(Color.GREEN);
            m_canvas1.getGraphicsContext2D().fillRect(8,8,92,92);
            m_button2.setText("(2) Button");
            
            m_canvas3.setWidth(100);
            m_canvas3.setHeight(100);
            m_canvas3.getGraphicsContext2D().setFill(Color.BLUE);
            m_canvas3.getGraphicsContext2D().fillRect(8,8,92,92);
            m_button4.setText("(4) Button");
        }
        
        protected void layoutChildren()
        {
            m_canvas1.resizeRelocate(0,0,100,100);
            m_button2.resizeRelocate(0,0,100,30);
            m_canvas3.resizeRelocate(90,90,100,100);
            m_button4.resizeRelocate(90,90,100,30);
        }
    }
    
    public static void main(String[] args) { launch(args); }

    MyPane m_pane;
    
    @Override
    public void start(Stage primaryStage)
    {
        primaryStage.setTitle("Hello World!");
        final Scene scene = SceneBuilder.create()
             .root
             (
                  m_pane = new MyPane()
             )
             .build();
        
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
}

I consider this behavior a bug. A quick and dirty solution would be the following, even if I do not want to do that in a real application:

package ztest;

import javafx.application.Application;
import javafx.scene.DepthTest;
import javafx.scene.Scene;
import javafx.scene.SceneBuilder;
import javafx.scene.canvas.Canvas;
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Test_40_Canvas extends Application
{
    class MyPane extends Pane
    {
        Canvas m_canvas1;
        Button m_button2;
        Canvas m_canvas3;
        Button m_button4;

        public MyPane()
        {
             setDepthTest(DepthTest.ENABLE);

            m_canvas1 = new Canvas();
            m_button2 = new Button();
            m_canvas3 = new Canvas();
            m_button4 = new Button();

            getChildren().add(m_canvas1);
            getChildren().add(m_button2);
            getChildren().add(m_canvas3);
            getChildren().add(m_button4);

            m_canvas1.setWidth(100);
            m_canvas1.setHeight(100);
            m_canvas1.getGraphicsContext2D().setFill(Color.GREEN);
            m_canvas1.getGraphicsContext2D().fillRect(8,8,92,92);
            m_button2.setText("(2) Button");

            m_canvas3.setWidth(100);
            m_canvas3.setHeight(100);
            m_canvas3.getGraphicsContext2D().setFill(Color.BLUE);
            m_canvas3.getGraphicsContext2D().fillRect(8,8,92,92);
            m_button4.setText("(4) Button");
        }

        protected void layoutChildren()
        {
            m_canvas1.resizeRelocate(0,0,100,100);
            m_canvas1.setTranslateZ(4);
            m_button2.resizeRelocate(0,0,100,30);
            m_button2.setTranslateZ(3);
            m_canvas3.resizeRelocate(90,90,100,100);
            m_canvas3.setTranslateZ(2);
            m_button4.resizeRelocate(90,90,100,30);
            m_button4.setTranslateZ(1);
        }
    }

    public static void main(String[] args) { launch(args); }

    MyPane m_pane;

    @Override
    public void start(Stage primaryStage)
    {
        primaryStage.setTitle("Hello World!");
        final Scene scene = SceneBuilder.create()
             .root
             (
                  m_pane = new MyPane()
             )
             .depthBuffer(true)
             .build();

        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

Save the image painted by JavaFX on disk

We can save the image painted by JavaSE drive in this way:
ImageIO.write (bi BufferedImage);
Graphics g = bi.getGraphics ();
g.Draw...

In JavaFX, canvas is considered to be a node, we can use canvas.getGraphicsContext2D () to paint. But how to save us from these painted images?

Thank you.

Hello. Use Canvas.snapshot (sp, wi WritableImage SnapshotParameters);

Here is an example:

   import java.awt.image.BufferedImage;
import java.io.File;
import javafx.application.Application;
import javafx.embed.swing.SwingFXUtils;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.*;
import javafx.scene.image.*;

import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.*;
import javax.imageio.ImageIO;
import java.io.*;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.paint.Color;
import javafx.scene.shape.ArcType;
import javafx.scene.shape.Rectangle;

public class PrintCanvas extends Application {

    @Override
    public void start(Stage primaryStage) {

        StackPane root = new StackPane();

        Scene scene = new Scene(root, 400, 450);
        WritableImage wim = new WritableImage(300, 250);

        Canvas canvas = new Canvas(300, 250);
        GraphicsContext gc = canvas.getGraphicsContext2D();
        drawShapes(gc);
        canvas.snapshot(null, wim);
        root.getChildren().add(canvas);

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();

        File file = new File("CanvasImage.png");

        try {
            ImageIO.write(SwingFXUtils.fromFXImage(wim, null), "png", file);
        } catch (Exception s) {
        }
    }

    public static void main(String[] args) {
        launch(args);
    }

    private void drawShapes(GraphicsContext gc) {
        gc.setFill(Color.GREEN);
        gc.setStroke(Color.BLUE);
        gc.setLineWidth(5);
        gc.strokeLine(40, 10, 10, 40);
        gc.fillOval(10, 60, 30, 30);
        gc.strokeOval(60, 60, 30, 30);
        gc.fillRoundRect(110, 60, 30, 30, 10, 10);
        gc.strokeRoundRect(160, 60, 30, 30, 10, 10);
        gc.fillArc(10, 110, 30, 30, 45, 240, ArcType.OPEN);
        gc.fillArc(60, 110, 30, 30, 45, 240, ArcType.CHORD);
        gc.fillArc(110, 110, 30, 30, 45, 240, ArcType.ROUND);
        gc.strokeArc(10, 160, 30, 30, 45, 240, ArcType.OPEN);
        gc.strokeArc(60, 160, 30, 30, 45, 240, ArcType.CHORD);
        gc.strokeArc(110, 160, 30, 30, 45, 240, ArcType.ROUND);
        gc.fillPolygon(new double[]{10, 40, 10, 40},
                new double[]{210, 210, 240, 240}, 4);
        gc.strokePolygon(new double[]{60, 90, 60, 90},
                new double[]{210, 210, 240, 240}, 4);
        gc.strokePolyline(new double[]{110, 140, 110, 140},
                new double[]{210, 210, 240, 240}, 4);
    }
}

Performance of the canvas

I've been testing the performance of canvas on a very fast machine (quad core Xeon) by recent NVidia graphics cards, but I am unable to make the video full screen 1920 x 1080 with this configuration using the Web.

It's simply too much hope for or am I missing some obvious performance enhancements?

Here's the code I used:

import java.nio.ByteBuffer;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.image.PixelFormat;
import javafx.scene.image.PixelWriter;
import javafx.scene.image.WritablePixelFormat;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;
import uk.co.caprica.vlcj.component.DirectMediaPlayerComponent;

import com.sun.jna.Memory;
import com.sun.jna.NativeLibrary;

public class VLCDirectTest extends Application {

  public static void main(final String[] args) {
    Application.launch(args);
  }

  private DirectMediaPlayerComponent mp;

  @Override
  public void start(Stage primaryStage) throws Exception {
    NativeLibrary.addSearchPath("libvlc", "c:/program files (x86)/videolan/vlc");

    BorderPane borderPane = new BorderPane();
    final Canvas canvas = new Canvas(1920, 1080);
    borderPane.setCenter(canvas);
    System.out.println(">>> " + canvas.getGraphicsContext2D().getPixelWriter().getPixelFormat());
    Scene scene = new Scene(borderPane);
    final PixelWriter pixelWriter = canvas.getGraphicsContext2D().getPixelWriter();
    final WritablePixelFormat<ByteBuffer> byteBgraInstance = PixelFormat.getByteBgraInstance();

    mp = new DirectMediaPlayerComponent("RV32", 1920, 1080, 1920*4) {
      @Override
      public void display(Memory nativeBuffer) {
        ByteBuffer byteBuffer = nativeBuffer.getByteBuffer(0, nativeBuffer.size());
        pixelWriter.setPixels(0, 0, 1920, 1080, byteBgraInstance, byteBuffer, 1920*4);
      }
    };

    mp.getMediaPlayer().playMedia("L:\\test-movies\\2012.mkv");

    primaryStage.setScene(scene);
    primaryStage.show();
  }
}

It works, but it hickups and distorts a lot when it hickups. Lower the resolution of 1600 x 900 to say, it is almost smooth. Lowering still gets the expected 24 frames per second.

Try to use IntBuffer, it's get-buffer possible bytes converted per pixel. I think if the pixel format and the width of the scan line corresponds,
System.arraycopy (...) is used instead of a loop / conversion on each pixel. It should be enough to download full HD of 25 frames per second.

There is also no need to use the node of the Web, you can use WritableImage.getImageWriter () .setPixels () with IntBuffer.
It is possible that the canvas node distributes all the draw lots / pixel in the render thread events and copy the array / buffer again.
I'd be curious what performance you get.

And well, I didn't know you could so easily integrate VLC =)

-----

PS:
Oh too bad for me that the WritableImage has a 'ByteBgraPre' (premultiplied) PixelFormat. Then
imgWriter.setPixels (0, 0, w, h, PixelFormat.getByteBgraPreInstance (), pixels.asByteBuffer (), w * 4);
was a little better than:
imgWriter.setPixels (0, 0, w, h, PixelFormat.getByteBgraInstance (), pixels.asByteBuffer (), w * 4);
For opaque, premultiplied images is not serious anyway. I managed to get 45 fps with upload of 1920 x 1200 pixels.

Published by: Fatima Sep 2, 2012 09:34

JavaFX 8 - way reasonable to make a canvas to fill its parent

This here is the essence of a problem with a canvas that I have right now
public class Test extends the Application
{
Public Shared Sub main (String [] args)
{
Launch (args);
}
@Override
public void start (point primaryStage)
{
TabPane tabPane = new TabPane();
Tab = new Tab ("Tab");
tabPane.getTabs () .add (tab);
BorderPane borderPane = new BorderPane();
tab.setContent (borderPane);
Canvas MyCanvas = new MyCanvas();
borderPane.setCenter (canvas);
canvas.setWidth (500);
canvas.heightProperty () .bind (borderPane.heightProperty ());
Scene = new scene (tabPane, 1300, 800);
primaryStage.setScene (scene);
primaryStage.show ();
}
MyCanvas class extends Canvas
{
public MyCanvas()
{
this.widthProperty () .addListener (evt-> draw());
this.heightProperty () .addListener (evt-> draw());
}
private void draw()
{
Double width = getWidth();
double height = getHeight();
System.out.println (width + ";" + height);
Context GraphicsContext = getGraphicsContext2D();
context.clearRect (0, 0, width, height);
context.setFill (Color.GREENYELLOW);
context.fillRect (0, 0, width, height);
}
}
}
The interesting line is
canvas.heightProperty () .bind (borderPane.heightProperty ());
This works only at halfway, when the window expands the draw functions, that all are called, but when the window is more tiny draw function is not called.
Now, I thought that maybe I should go higher up in the hierarchy.
canvas.heightProperty () .bind (tab.? tab has no heightProperty
A more?
canvas.heightProperty.bind (tabPane.tabPane.heightProperty ());
Now this seems good (it works when it gets bigger or smaller), until you realize that it will be always at least 29 big pixels (at least on my system)
The reason is that the header is the pixel 29 missing. But I don't see a way to get the size of the header of the tabPane. Now, I could just subtract the tabPane.heightProperty 29, but it won't work that on my system, it might be a different size on other systems or javafx could change.
I looked at a few other ways to get a resizable canvas, but things like the creation of a custom component and only put the canvas substituting the layoutChildren method seems more like a hack of a proposed solution.
I would really appreciate a way to resize my paintings on request, without going any further than the parent of my canvas (borderPane in my case).

You can use something like this to make a resizable canvas.
```
public final class CanvasPane extends Region {

    private final Canvas delegated = new Canvas();

    public CanvasPane() {
        getChildren().add(delegated);
        delegated.widthProperty().addListener(observable -> draw());
        delegated.heightProperty().addListener(observable -> draw());
    }

    @Override
    protected void layoutChildren() {
        super.layoutChildren();
        final double width = getWidth();
        final double height = getHeight();
        final Insets insets = getInsets();
        final double contentX = insets.getLeft();
        final double contentY = insets.getTop();
        final double contentWith = Math.max(0, width - (insets.getLeft() + insets.getRight()));
        final double contentHeight = Math.max(0, height - (insets.getTop() + insets.getBottom()));
        delegated.relocate(contentX, contentY);
        delegated.setWidth(contentWith);
        delegated.setHeight(contentHeight);
    }

    private void draw() {
        final double width = delegated.getWidth();
        final double height = delegated.getHeight();
        final GraphicsContext gc = delegated.getGraphicsContext2D();
        gc.setFill(Color.GREENYELLOW);
        gc.fillRect(0, 0, width, height);
    }
}
```
Also, it is really unnecessary to link anything because you set this control within a BorderPane: it is automatically resized to the dimensions of the central area.

You can create a similar class for a resizable ImageView.

Where is the HTML5 Canvas publish setting "make sensitive > scale to fill the visible area"?

I'm trying to publish my flash converted to project canvas HTML5. I'm used to be able to scale the output in the browser dynamically. Looking at the available documentation and online help, that I can see that there is a setting that seems to be what I'm looking for.
Documents to create HTML5 Canvas to animate CC
But the screenshot of the creation of the publication is not what I have on the screen, the whole Middle section is missing.
https://helpx.Adobe.com/animate/using/creating-publishing-HTML5-canvas-document/_jcr_conte nt/main-pars/image_376055745.i...

using animate pro 2015.2?

If Yes, attach a screenshot of what you see in the publication settings.

If this isn't the case, please update.

layer of scale current canvas size Photoshop

I've been googling and reading, but I was not able to find an action or method to select a layer, and they scale to the size of the canvas? This seems to be something that should be built in?
Anyone know of a script or action that I can use?
Sometimes, it must be able to evolve upwards or downwards.
And I don't need to keep the proportions. The scale just to fill.
Thanks for your help
Maxi
PS: I know Russell Brown paper Texture extension, charged layers are scale to fit the canvas.

What is your units of the rule? I only get the error in CS6 if the rule per cent. If your rule is set to % I can add code to the script will correct the error.

Pouvez Edge animation scale/resize Flash and canvas

One of our biggest concern is now animation made with Adobe Edge cannot scale and resize as Flash or canvas (and we don't mean design fluid or reactive) is this true? Our animations should allow the user zoom or zoom out without any restrictions, we can build our animation with Adobe Edge?
Thank you

Ah might as well post it here as well - I have a tutorial to see how to go about this here http://www.youtube.com/watch?feature=player_embedded&v=hrLt0Y9QAY8

Sarah

Prevent the PS scale of the vector elements slipped to adjust the canvas?

I am drag and paste work created in artificial intelligence in PS the canvas PS is 1920 x 1080 and the work of HAVE is bigger than that. When I drag and paste the vector art on the PS canvas, Photoshop is changing the work to fit the canvas. I don't want to do, I want it retains its size. Any ideas how to make this happen?

Photoshop > Preferences > General > resize the Image over the Place?

JavaFX 8 node dynamic scaling

I'm trying to implement a scene with a ScrollPane in which the user can drag around a knot and resize it dynamically. I'm moving and scaling with the mouse wheel work as well as a zoom reset.

Here's my question:

I have a problem with the calculations to suit the width of the parent node.

If I Zoom in or out, the width adjustment does not work.

If I change the size of the window after execution of fitWidth() once, the width adjustment does not the second time.

Here is my code as a NBS and how it works...

1 (works) mouse wheel will zoom in and out around the mouse pointer

2 (works) or press left mouse to drag the rectangle autour

3 (work) left, double-click to reset the zoom

4. (does not) double-clicked right to fit the width

My calculations to reposition the rectangle at the top left of the pane and mount it (i.e., resize it upwards or downwards) to the width of the parent are incorrect.

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.control.ScrollPane.ScrollBarPolicy;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.input.ScrollEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.StrokeType;
import javafx.stage.Stage;
import javafx.util.Duration;

public class ZoomAndPanExample extends Application {

   private ScrollPane scrollPane = new ScrollPane();

   private final DoubleProperty zoomProperty = new SimpleDoubleProperty(1.0d);
   private final DoubleProperty deltaY = new SimpleDoubleProperty(0.0d);

   private final Group group = new Group();

   public static void main(String[] args) {
   Application.launch(args);
   }

   @Override
   public void start(Stage primaryStage) {

  scrollPane.setPannable(true);
  scrollPane.setHbarPolicy(ScrollBarPolicy.NEVER);
  scrollPane.setVbarPolicy(ScrollBarPolicy.NEVER);
   AnchorPane.setTopAnchor(scrollPane, 10.0d);
   AnchorPane.setRightAnchor(scrollPane, 10.0d);
   AnchorPane.setBottomAnchor(scrollPane, 10.0d);
   AnchorPane.setLeftAnchor(scrollPane, 10.0d);

   AnchorPane root = new AnchorPane();

   Rectangle rect = new Rectangle(80, 60);

  rect.setStroke(Color.NAVY);
  rect.setFill(Color.NAVY);
  rect.setStrokeType(StrokeType.INSIDE);

  group.getChildren().add(rect);
   // create canvas
   PanAndZoomPane panAndZoomPane = new PanAndZoomPane();
  zoomProperty.bind(panAndZoomPane.myScale);
  deltaY.bind(panAndZoomPane.deltaY);
  panAndZoomPane.getChildren().add(group);

   SceneGestures sceneGestures = new SceneGestures(panAndZoomPane);

  scrollPane.setContent(panAndZoomPane);
  panAndZoomPane.toBack();
  scrollPane.addEventFilter( MouseEvent.MOUSE_CLICKED, sceneGestures.getOnMouseClickedEventHandler());
  scrollPane.addEventFilter( MouseEvent.MOUSE_PRESSED, sceneGestures.getOnMousePressedEventHandler());
  scrollPane.addEventFilter( MouseEvent.MOUSE_DRAGGED, sceneGestures.getOnMouseDraggedEventHandler());
  scrollPane.addEventFilter( ScrollEvent.ANY, sceneGestures.getOnScrollEventHandler());

  root.getChildren().add(scrollPane);
   Scene scene = new Scene(root, 600, 400);
  primaryStage.setScene(scene);
  primaryStage.show();
   }

   class PanAndZoomPane extends Pane {

   public static final double DEFAULT_DELTA = 1.3d;
   DoubleProperty myScale = new SimpleDoubleProperty(1.0);
   public DoubleProperty deltaY = new SimpleDoubleProperty(0.0);
   private Timeline timeline;


   public PanAndZoomPane() {

   this.timeline = new Timeline(60);

   // add scale transform
  scaleXProperty().bind(myScale);
  scaleYProperty().bind(myScale);
   }


   public double getScale() {
   return myScale.get();
   }

   public void setScale( double scale) {
  myScale.set(scale);
   }

   public void setPivot( double x, double y, double scale) {
   // note: pivot value must be untransformed, i. e. without scaling
   // timeline that scales and moves the node
  timeline.getKeyFrames().clear();
  timeline.getKeyFrames().addAll(
   new KeyFrame(Duration.millis(200), new KeyValue(translateXProperty(), getTranslateX() - x)),
   new KeyFrame(Duration.millis(200), new KeyValue(translateYProperty(), getTranslateY() - y)),
   new KeyFrame(Duration.millis(200), new KeyValue(myScale, scale))
   );
  timeline.play();

   }

   /** 
  * !!!! The problem is in this method !!!!
  * 
  * The calculations are incorrect, and result in unpredictable behavior
  *  
  */
   public void fitWidth () {
   double scale = getParent().getLayoutBounds().getMaxX()/getLayoutBounds().getMaxX();
   double oldScale = getScale();

   double f = (scale / oldScale)-1;

   double dx = getTranslateX() - getBoundsInParent().getMinX() - getBoundsInParent().getWidth()/2;
   double dy = getTranslateY() - getBoundsInParent().getMinY() - getBoundsInParent().getHeight()/2;

   double newX = f*dx + getBoundsInParent().getMinX();
   double newY = f*dy + getBoundsInParent().getMinY();

  setPivot(newX, newY, scale);

   }

   public void resetZoom () {
   double scale = 1.0d;

   double x = getTranslateX();
   double y = getTranslateY();

  setPivot(x, y, scale);
   }

   public double getDeltaY() {
   return deltaY.get();
   }
   public void setDeltaY( double dY) {
  deltaY.set(dY);
   }
   }


   /**
  * Mouse drag context used for scene and nodes.
  */
   class DragContext {

   double mouseAnchorX;
   double mouseAnchorY;

   double translateAnchorX;
   double translateAnchorY;

   }

   /**
  * Listeners for making the scene's canvas draggable and zoomable
  */
   public class SceneGestures {

   private DragContext sceneDragContext = new DragContext();

   PanAndZoomPane panAndZoomPane;

   public SceneGestures( PanAndZoomPane canvas) {
   this.panAndZoomPane = canvas;
   }

   public EventHandler<MouseEvent> getOnMouseClickedEventHandler() {
   return onMouseClickedEventHandler;
   }

   public EventHandler<MouseEvent> getOnMousePressedEventHandler() {
   return onMousePressedEventHandler;
   }

   public EventHandler<MouseEvent> getOnMouseDraggedEventHandler() {
   return onMouseDraggedEventHandler;
   }

   public EventHandler<ScrollEvent> getOnScrollEventHandler() {
   return onScrollEventHandler;
   }

   private EventHandler<MouseEvent> onMousePressedEventHandler = new EventHandler<MouseEvent>() {

   public void handle(MouseEvent event) {

  sceneDragContext.mouseAnchorX = event.getX();
  sceneDragContext.mouseAnchorY = event.getY();

  sceneDragContext.translateAnchorX = panAndZoomPane.getTranslateX();
  sceneDragContext.translateAnchorY = panAndZoomPane.getTranslateY();

   }

   };

   private EventHandler<MouseEvent> onMouseDraggedEventHandler = new EventHandler<MouseEvent>() {
   public void handle(MouseEvent event) {

  panAndZoomPane.setTranslateX(sceneDragContext.translateAnchorX + event.getX() - sceneDragContext.mouseAnchorX);
  panAndZoomPane.setTranslateY(sceneDragContext.translateAnchorY + event.getY() - sceneDragContext.mouseAnchorY);

  event.consume();
   }
   };

   /**
  * Mouse wheel handler: zoom to pivot point
  */
   private EventHandler<ScrollEvent> onScrollEventHandler = new EventHandler<ScrollEvent>() {

   @Override
   public void handle(ScrollEvent event) {

   double delta = PanAndZoomPane.DEFAULT_DELTA;

   double scale = panAndZoomPane.getScale(); // currently we only use Y, same value is used for X
   double oldScale = scale;

  panAndZoomPane.setDeltaY(event.getDeltaY()); 
   if (panAndZoomPane.deltaY.get() < 0) {
  scale /= delta;
   } else {
  scale *= delta;
   }

   double f = (scale / oldScale)-1;

   double dx = (event.getX() - (panAndZoomPane.getBoundsInParent().getWidth()/2 + panAndZoomPane.getBoundsInParent().getMinX()));
   double dy = (event.getY() - (panAndZoomPane.getBoundsInParent().getHeight()/2 + panAndZoomPane.getBoundsInParent().getMinY()));

  panAndZoomPane.setPivot(f*dx, f*dy, scale);

  event.consume();

   }
   };

   /**
  * Mouse click handler
  */
   private EventHandler<MouseEvent> onMouseClickedEventHandler = new EventHandler<MouseEvent>() {

   @Override
   public void handle(MouseEvent event) {
   if (event.getButton().equals(MouseButton.PRIMARY)) {
   if (event.getClickCount() == 2) {
  panAndZoomPane.resetZoom();
   }
   }
   if (event.getButton().equals(MouseButton.SECONDARY)) {
   if (event.getClickCount() == 2) {
  panAndZoomPane.fitWidth();
   }
   }
   }
   };
   }
}

I found the answer. I was looking at the wrong calculations, assuming that it be linked to translation. The real culprit was the calculation of the difference in scale. I just changed this:

double f = (scale / oldScale)-1;

to do this:

double f = scale - oldScale;

in the fitWidth() method, thus producing this...

    public void fitWidth () {
        double scale = getParent().getLayoutBounds().getMaxX()/getLayoutBounds().getMaxX();
        double oldScale = getScale();

        double f = scale - oldScale;

        double dx = getTranslateX() - getBoundsInParent().getMinX() - getBoundsInParent().getWidth()/2;
        double dy = getTranslateY() - getBoundsInParent().getMinY() - getBoundsInParent().getHeight()/2;

        double newX = f*dx + getBoundsInParent().getMinX();
        double newY = f*dy + getBoundsInParent().getMinY();

        setPivot(newX, newY, scale);

    }

Video playback with the scale is "scrambled" and not

Hello

I have been working on it quite widely and could not find a solution. I've seen this thread:

http://www.BlackBerryForums.com/developer-forum/159304-playing-videos-BlackBerry-J2ME-app.html

But the presented solution did not help me.

I am creating a video player using MMAPI I can use the RIM API too if necessary, but given that my request is more focused on canvas I prefer using MMAPI (the application derives from full screen and use the rim API). When I try to play a video the application adapts to the position of the user interface, it works on all devices non - rim with the MMAPI code that I use but the breaks on the RIM.

Is there a form any workaround on the video scale on RIM devices?

I am currently using VideoControl.USE_DIRECT_VIDEO, but I tried the USE_GUI_PRIMITIVE sunk to the field with similar results. The only solution that worked for me was to avoid the scaling that is not a solution... Are there examples of code that does something like that with success?

BTW I use 4.7 and 4.5 simulators and video, I'm playing is of the video sample that comes with the Simulator (EmbeddedMediaDemo: BlackBerry.mp4).

Thank you.

If the size of the original video (I mean dimensions) is smaller that you use during playback - video will be blurred.

It doesn't matter how device, API, regardless.

Defining the interface of the scale to 200% in Photoshop CC 2015 does not work.

Title says it all. I have change the scale to 200% to take into account my 4K monitor and restart Ps and my computer does not change it. Is there a solution to this? Thank you.

Can you show two screenshots like this. I opened CC 2015.5 Edit preference Interfaces, it has shown 100% IU. I have PRTSCN to copy the screen to the Clipboard. Change IU 200% hit OK and close Photoshop. Open Photoshop opened a new document Clipboard format and Pasted in the screenshot. 100% relative additional canvas. Change preferences Interface saw 200% and click on Prtscrn to screenshot. 200% changed to 100% and click OK. a Pasted in the second screenshot an aline layer down, you can see the Interface preferably did not fit my display 1920 x 1080 to scale 2 x it becomes a display 960 x 540 and responds PS status of 1024 x 768.

Size of the canvas or canvas Proportions

I understand that the size is unrelated to the vector drawing because art can be infinitely scaling, but I would like that my drawing specific proportional size canvas. I can't understand how to make the draw. I fish my first drawing with my new iPad Pro and over the weekend, but the take it to Illustrator when he was done so that I could settle the art Board. Does anyone have suggestions on how to handle this without the aid of Illustrator?
If you're curious, I published the "Tiger Illustration' on Behance drawing with screen grabs, which show what is my challenge.
I draw a rectangular shape to the background which approximates canvases of the proportions, but it is not accurate. It would be nice if the rectangular shape tool enabled us to draw with the numerical proportions. It would be even better if we could predict at the beginning of a new drawing canvas size, kind of like Adobe Comp.
I also place Capture shapes in my drawing's background that are often put to scale beyond the canvas boundaries. It is impossible to draw mask shapes so I guess my only option is to clear areas that extend beyond the Commission art or canvas.

Theresa.

Sorry for my slow response. It will export to Behance everything you see on your screen of iPad Pro. So basically zoom in/zoom out until you see the image you want to share, then post on Behance.

Who help me?

Sue.

How to resize image in Html5 Canvas?

Hey, I try to width and height to resize the image using the code:
```
h01 = document.createElement('img');
h01.src = 'images/rambut/h01.png';
h01.width = 69;
h01.height = 69;
var images_h01 = new createjs.Bitmap(h01);
this.mc_h01.addChild(images_h01);
```
but the size of the image is not changing anything.
Help...

CreateJS is not a way to explicitly set the height and width of the image. If you already know the dimensions of the external image, just use some simple calculations to convert the dimensions in a scale factor. If you don't know the dimensions of the external image, you can access it from image.width and image.height. However, it will need to wait until the image is loaded.

Or, you could give up on the relationship between the image in CreateJS of DOM and just do float directly on the canvas yourself.

JavaFX scale canvas

Known Limitations

Similar Questions

Maybe you are looking for