I am writing a new Imageview with mask in Javafx.
The mask can show according to the direction of mouse.
Using Timeline makes it work well. But when the mask leaves, the mask is still visible.
I want to hide the part of mask, which is out of the Image. How can I scale it?
When mouse enter:
When mouse leave:
And my animation code
private void leftOut() {
KeyFrame k1 = new KeyFrame(Duration.ZERO, new KeyValue(mask.translateXProperty(), 0));
KeyFrame k2 = new KeyFrame(time, new KeyValue(mask.translateXProperty(), control.getWidth()*-1.0));
timeline = new Timeline();
timeline.getKeyFrames().addAll(k1,k2);
timeline.play();
}
Other directions are just like this.
You don't need to resize the mask at all. Simply apply a clip to it that has the same size as the image:
Image image = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg/164px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF.jpg");
ImageView imageView = new ImageView(image);
// init mask
Label mask = new Label("SomeText");
mask.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE);
mask.setPrefSize(image.getWidth(), image.getHeight());
mask.setStyle("-fx-background-color: rgba(255, 255, 255, 0.6);");
mask.setAlignment(Pos.CENTER);
// create clip
Rectangle clip = new Rectangle(image.getWidth(), image.getHeight());
mask.setClip(clip);
// keep clip in position horizontally in root
clip.translateXProperty().bind(mask.translateXProperty().negate());
StackPane root = new StackPane(imageView, mask);
root.setPrefSize(500, 500);
root.setStyle("-fx-background-color: orange;");
// probably a bit simpler to use TranslateTransition instead of Timeline
TranslateTransition transition = new TranslateTransition(Duration.seconds(5), mask);
transition.setByX(image.getWidth());
transition.play();
Related
How can i draw this line on my canvas and image, BUT under text?
so basically the render order should be this:
canvas
image
line
text
so text would be on top of every one of them.
right now i am almost there, but the line is over the text.
i am using world space on my canvas, and the event camera is set to Main Camera.
Picture
Add a "canvas" in the Hierarchy.
Add a "Image" under the "canvas" in the Hierarchy.
Add a "GameObject" under the "Image" in the Hierarchy.
Add a C# script in the Assets. The C# script named as "NewBehaviourScript".
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
using UnityEngine.UI;
public class NewBehaviourScript : MaskableGraphic
{
Static NewBehaviourScript self;
NewBehaviourScript()
{
self = this;
}
// To redraw from outside this class, call NewBehaviourScript.redraw()
static public void redraw()
{
print("redraw");
self.SetAllDirty();
}
protected override void OnPopulateMesh(VertexHelper vh)
{
vh.Clear();
UIVertex vertex = UIVertex.simpleVert;
vertex.color = Color.red;
// draw a diagonal red line from bottom left to top right
// first triangle
vertex.position = new Vector2(0, 0); // lower left position
vh.AddVert(vertex);
vertex.position = new Vector2(canvas.pixelRect.width+2, canvas.pixelRect.height);
vh.AddVert(vertex);
vertex.position = new Vector2(canvas.pixelRect.width-2, canvas.pixelRect.height);
vh.AddVert(vertex);
// second triangle
vertex.position = new Vector2(2, 0);
vh.AddVert(vertex);
vertex.position = new Vector2(-2, 0);
vh.AddVert(vertex);
vertex.position = new Vector2(canvas.pixelRect.width, canvas.pixelRect.height);
// position it on the upper right.
vh.AddVert(vertex);
// draw two elongated triangles to form a straight line
vh.AddTriangle(0, 1, 2); // only triangles can be drawn
vh.AddTriangle(3, 4, 5); // only triangles can be drawn
}
}
Click the "GameObject" to show Inspector view, and click "Add component" button.
Add ""Canvas Renderer" into the "GameObject".
Drag "NewBehaviourScript" (in the assets) and drop it on the GameObject (in Hierarchy).
Add a "Text (Legacy)" under the "GameObject" in the hierarchy
With screen captured guide is here. This is an article I wrote.
https://kuukaix.hatenablog.com/entry/2022/10/02/181043
I'm having a bit of difficulty getting some functionality to work. I'm trying to create an eraser and erase parts of an image using easelJS. I've seen other people do this, but only erasing other graphics - and when I try to erase an image, I can't get anything to work. If I wanted to erase a bitmap instead of other graphics, is that possible?
I also tried to use the AlphaMaskFilter, but it's giving me the exact opposite of what I'm looking for (it's masking everything, and only revealing what I paint).
var c = createjs, stage, art;
var x, y, listener, color, hue=0;
stage = new c.Stage("test");
var testImg = new c.Bitmap("http://lorempixel.com/output/animals-q-c-640-480-5.jpg");
art = stage.addChild(testImg, new c.Shape());
art.cache(0,0,600,400);
stage.on("stagemousedown", startDraw, this);
function startDraw(evt) {
listener = stage.on("stagemousemove", draw, this);
stage.on("stagemouseup", endDraw, this);
color = c.Graphics.getHSL(hue+=85, 50, 50);
x = evt.stageX-0.001; // offset so we draw an initial dot
y = evt.stageY-0.001;
draw(evt); // draw the initial dot
}
function draw(evt) {
art.graphics.ss(20,1).s(color).mt(x,y).lt(evt.stageX, evt.stageY);
// the composite operation is the secret sauce.
// we'll either draw or erase what the user drew.
art.updateCache(erase.checked ? "destination-out" : "source-over");
art.graphics.clear();
x = evt.stageX;
y = evt.stageY;
stage.update();
}
function endDraw(evt) {
stage.off("stagemousemove", listener);
evt.remove();
}
http://jsfiddle.net/17xec9y5/8/
Your example is only affecting the Shape instance that you have cached. When you use multiple arguments in addChild(), it returns the last added item, so in your sample, the art variable just references the shape. So the image is just below the "painted area" that you are drawing to.
To fix this, create and cache a container instead. A few minor additions:
Once the image loads, update the cache one time (to apply the image).
Then remove the image so it is no longer applied every time you update the cache while drawing.
That's it!
Here is a fiddle:
http://jsfiddle.net/lannymcnie/17xec9y5/9/
Relevant Code:
// Listen for the image load
testImg.image.onload = function() {
cont.updateCache("source-over"); // Update cache once
cont.removeChild(testImg); // Remove image
stage.update(); // Draw the stage to see the image
}
// Create a sub-container that will hold the art and image
var cont = stage.addChild(new c.Container());
art = new c.Shape(); // Art is just the shape
cont.cache(0,0,600,400); // Cache the container instead
cont.addChild(testImg, art);
// Then, later update the container's cache (instead of the art)
cont.updateCache(erase.checked ? "destination-out" : "source-over");
Does anyone have any ideas on how to set the background color on the PdfSignatureAppearance rectangle in iTextSharp? I create the PdfSignatureAppearance object and can set its positioning on the page, but the rectangle only has a transparent background. I'm trying to apply a color (any really).
I've tried creating a new iTextSharp.text.Rectangle then setting the rect.BackgroundColor = new BaseColor(System.Drawing.Color.Yellow); That doesn't work. I saw someone else trying to something similar by applying the styles to the layer2 of the signature appearance object. I've tried these with no luck.
PdfTemplate sigAppLayer2 = appearance.GetLayer(2);
sigAppLayer2.SetRGBColorFill(255, 0, 0);
sigAppLayer2.SetGrayFill(2);
sigAppLayer2.BoundingBox.BackgroundColor = new BaseColor(System.Drawing.Color.Yellow);
Anytime I try one of the above styling changes to the layer2 the visible signature disappears on the PDF. If I try applying it to layer 0 or layer 1 then nothing happens. I'm assuming then I'm touching the correct layer (2).
Any ideas? The goal is to just get a background on the signature box vs having it be transparent.
See comment below. I tried this as well setting against layer 2 and layer 0. Both result in a red box, but the signature text is missing.
PdfTemplate sigAppLayer2 = appearance.GetLayer(2);
Rectangle rect = sigAppLayer2.BoundingBox;
PdfTemplate sigAppLayer0 = appearance.GetLayer(0);
sigAppLayer0.SetRGBColorFill(255, 0, 0);
sigAppLayer0.Rectangle(rect.Left, rect.Bottom, rect.Width, rect.Height);
sigAppLayer0.Fill();
You need to draw the rectangle and fill that rectangle with the fill color.
From memory (untested), you need something like this:
PdfTemplate sigAppLayer2 = appearance.GetLayer(2);
Rectangle rect = sigAppLayer2.BoundingBox;
sigAppLayer2.SetRGBColorFill(255, 0, 0);
sigAppLayer2.Rectangle(rect.Left, rect.Bottom, rect.Width, rect.Height);
sigAppLayer2.Fill();
This is the way:
PdfTemplate sigAppLayer2 = appearance.GetLayer(2);
Rectangle rect = sigAppLayer2.BoundingBox;
sigAppLayer2.SetRGBColorFill(255, 0, 0);
sigAppLayer2.Rectangle(rect.Left, rect.Bottom, rect.Width, rect.Height);
sigAppLayer2.Fill();
sigAppLayer2.ResetRGBColorFill();// <--------- you needs this
sigAppLayer2.BeginText() ...etc
I'm trying to resize a Image in vala.
So I read valadoc and end up writing this code
var img = new Gtk.Image.from_file ("fire.png");
var pix_buf = img.get_pixbuf ();
pix_buf.scale_simple (50, 50, InterpType.BILINEAR);
window.add (img);
But it has no effect.
If there is a way to dynamically scale the image so that it fill his container it would be awesome, but just scaling it would be fine.
Pixbuf.scale_simple does not modify the image. It returns a new Pixbuf that has been scaled. Use Image.from_pixbuf to create a new image and add that to your window.
The main layout of my ScalaFX 8 application consists of a BorderPane. The top attribute contains a menu whereas bottom contains something similar to a status bar. My goal is to display a component for viewing 3D objects in the center of the BorderPane (acting as a SubScene).
stage = new PrimaryStage {
scene = new Scene(900, 900, true, SceneAntialiasing.Balanced) {
root = new BorderPane {
top = createMenu // creates a menu inside of a VBox
center = createViewer // should create a subscene inside of whatever is needed
bottom = createStatusBar // creates a status bar inside of a VBox
}
}
}
I'm trying to create a minimal working example with a SubScene that only consists of black background and a simple sphere, no more, no less. The SubScene should use the whole space that is available in the center of BorderPane and resize accordingly. Unfortunately, I can't make it work.
Since the size of a SubScene is fixed, I assume it is necessary to embed the SubScene in another container (which is able to resize automatically) and bind the dimensions of the SubScene to the dimensions of the container around it.
def createViewer = {
val bp = new BorderPane
val subScene: SubScene = new SubScene(bp, 200, 200, true, SceneAntialiasing.Balanced) {
fill = Color.Black
width <== bp.width
height <== bp.height
content = new Sphere(3) { material = new PhongMaterial(Color.Red) }
camera = new PerspectiveCamera(true) { ... }
}
bp.center = subScene
subScene
}
The result looks like this:
Two obvious problems:
The SubScene keeps the fixed size from its constructor. In neither "maximizes" in the center of the outer BorderPane, nor does it do anything when the window gets resized
There is the red dot, but the bottom right corner of the SubScene is not black (?)
My assumption is that I have some problems understanding what the root element of the SubScene really is and what it does. I found another thread for JavaFX with a similar problem, this solution distinguishes between the root element of the SubScene (I'm not sure where that element comes from) and the Pane but I couldn't apply it to my case. Any help is appreciated. Thanks.
the idea here is to get the read only properties for the top level scene there is probably a more elegant way to do this, but this works
scene = new Scene(900, 900, true, SceneAntialiasing.Balanced) {
// these are read only properties for the scene
var tmpw = this. width
var tmph = this. height
root = new BorderPane {
top = new HBox {
content = new Label {
text = "menu"
}
}
center = createView(tmpw, tmph)
}
}
width onChange show
height onChange show
}
the idea here is to bind the read only properties to the properties of the subscene, then
the subscene will re-size there is probably a way to avoid the 'this' key-word.
I have tested this and the subscene re-sizes with the parent scene. I have omitted the PerspectiveCamera code block as you did not include what you were using
def createView(boundWidth : ReadOnlyDoubleProperty, boundHeight : ReadOnlyDoubleProperty): BorderPane = {
new BorderPane {
center = new SubScene(boundWidth.get(), boundHeight.get(), true, SceneAntialiasing.Balanced) {
fill = Color.BLACK
content = new Sphere(3) { material = new PhongMaterial(Color.RED) }
camera = new PerspectiveCamera(true)
// bind the subscene properties to the parents
this.width.bind(boundWidth.add(-200))
this.height.bind(boundHeight.add(-200))
}
}
}