Question

如果光标位置在ImageView范围内，我需要一种在ImageView中获得灰度图像的方法，并且鼠标移动时，鼠标位置会显示彩色聚光灯。

我创建了一个示例来帮助您了解我的需求。此示例取消onMouseMoved事件上彩色图像的颜色。

package javafxapplication3;

import javafx.scene.effect.BlendMode;
import javafx.scene.Group;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

var spotlightX = 0.0;
var spotlightY = 0.0;
var visible = false;
var anImage = Image {
        url: "{__DIR__}picture1.jpg"
    }
Stage {
    title: "Spotlighting"
    scene: Scene {
        fill: Color.WHITE
        content: [
            Group {
            blendMode: BlendMode.EXCLUSION
            content: [
                ImageView {
                    image: anImage
                    onMouseMoved: function (me: MouseEvent) {
                        if (me.x > anImage.width - 10 or me.x < 10 or me.y > anImage.height - 10 or me.y < 10) {
                            visible = false;
                        } else {
                            visible = true;
                        }
                        spotlightX = me.x;
                        spotlightY = me.y;
                    }
                },
                Group {
                    id: "spotlight"
                    content: [
                        Circle {
                            visible: bind visible
                            translateX: bind spotlightX
                            translateY: bind spotlightY
                            radius: 60
                            fill: RadialGradient {
                                centerX: 0.5
                                centerY: 0.5
                                stops: [
                                    Stop { offset: 0.1, color: Color.WHITE },
                                    Stop { offset: 0.5, color: Color.BLACK },
                                ]
                            }
                        }
                    ]
                }
            ]
        },
    ]
    },
}

更具体一点：

我想以灰度模式显示彩色图像
在鼠标悬停时，我想要一个聚光灯着色，与将要以灰度模式渲染的图像的其余部分形成对比（如上面要求1中所述）。聚光灯将以与鼠标光标相同的方向移动

Answer 1

我将如何做到这一点。使用2个图像，一种颜色和一种灰度。在灰度上使用剪辑。以下是示例代码

var color:ImageView = ImageView {
    image: Image {
        url: "{__DIR__}color.jpg"
    }   
}

var x:Number = 100;
var y:Number = 100;
var grayscale:ImageView = ImageView {
    image: Image {
        url: "{__DIR__}grayscale.jpg"
    }
    clip: Circle {
        centerX: bind x
        centerY: bind y
        radius: 40
    }   
    onMouseDragged: function (e: MouseEvent): Void {
        x = e.sceneX;
        y = e.sceneY;
    }
}


Stage {
    title: "Application title"
    scene: Scene {
        width: 500
        height: 500
        content: [
            color, grayscale
        ]
    }
}

Answer 2

不幸的是我无法直接回答这个问题，但我认为你不能实现纯粹使用混合模式后的目标，希望如果我错了会有人纠正我。

我建议同时探索图像的灰度和彩色版本，其中彩色图像是“屏幕外”，然后让聚光灯元素指的是彩色图像部分对应于相同的区域。 - 屏幕灰度图像。这样看起来好像可移动的聚光灯突出了一部分灰度图像的颜色。换句话说，聚光灯实际上是“覆盖”彩色图像，即使它在屏幕外。

在JavaFX中的彩色聚光灯的灰度图像

2 个答案: