How to make part of area transparent and the rest show semitransparent?
2
I am trying to make a selectable rectangle inside an image.
Image {
id: image
Rectangle { //full-transparent like a viewport
id: rect
}
}
which looks like using the screenshot, the area which you select is full-transparent, but the rest is semi-transparent(or blur).
I found opacitymask which is a little bit similar, but I want the rest of the area shows semi-transparent, not just white.
The complete code of this project: https://github.com/arkceajin/QtDemos/tree/master/CropBox
qt qml opacity opacitymask
asked Dec 27 '18 at 3:07
JiuJiu
1,67121030
add a comment |
2
I am trying to make a selectable rectangle inside an image.
Image {
id: image
Rectangle { //full-transparent like a viewport
id: rect
}
}
which looks like using the screenshot, the area which you select is full-transparent, but the rest is semi-transparent(or blur).
I found opacitymask which is a little bit similar, but I want the rest of the area shows semi-transparent, not just white.
The complete code of this project: https://github.com/arkceajin/QtDemos/tree/master/CropBox
qt qml opacity opacitymask
asked Dec 27 '18 at 3:07
JiuJiu
1,67121030
add a comment |
2
2
2
I am trying to make a selectable rectangle inside an image.
Image {
id: image
Rectangle { //full-transparent like a viewport
id: rect
}
}
which looks like using the screenshot, the area which you select is full-transparent, but the rest is semi-transparent(or blur).
I found opacitymask which is a little bit similar, but I want the rest of the area shows semi-transparent, not just white.
The complete code of this project: https://github.com/arkceajin/QtDemos/tree/master/CropBox
qt qml opacity opacitymask
asked Dec 27 '18 at 3:07
JiuJiu
1,67121030
I am trying to make a selectable rectangle inside an image.
Image {
id: image
Rectangle { //full-transparent like a viewport
id: rect
}
}
which looks like using the screenshot, the area which you select is full-transparent, but the rest is semi-transparent(or blur).
I found opacitymask which is a little bit similar, but I want the rest of the area shows semi-transparent, not just white.
The complete code of this project: https://github.com/arkceajin/QtDemos/tree/master/CropBox
qt qml opacity opacitymask
qt qml opacity opacitymask
asked Dec 27 '18 at 3:07
JiuJiu
1,67121030
asked Dec 27 '18 at 3:07
JiuJiu
1,67121030
edited Dec 28 '18 at 7:33
Jiu
asked Dec 27 '18 at 3:07
JiuJiu
1,67121030
asked Dec 27 '18 at 3:07
JiuJiu
1,67121030
asked Dec 27 '18 at 3:07
JiuJiu
1,67121030
1,67121030
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
For these cases you must use ShaderEffect:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("ShaderEffect Example")
Image {
id: image
source: "qrc:/dog.png"
anchors.centerIn: parent
layer.enabled: true
layer.effect: ShaderEffect {
property real alpha: 0.4
property rect sourceRect: Qt.rect(width/4, height/4, width/2, height/2)
property real xStep: 1/width
property real yStep: 1/height
fragmentShader: "
uniform lowp sampler2D source;
varying mediump vec2 qt_TexCoord0;
uniform lowp float qt_Opacity;
uniform highp float alpha;
uniform highp vec4 sourceRect;
uniform highp float xStep;
uniform highp float yStep;
bool insideBox(vec2 topLeft, vec2 bottomRight, vec2 point){
vec2 s = step(topLeft, point) - step(bottomRight, point);
return (s.x * s.y) > 0.0;
}
void main() {
vec2 topLeft = vec2(sourceRect.x*xStep, sourceRect.y*yStep);
vec2 bottomRight = topLeft + vec2(sourceRect.z*xStep, sourceRect.w*yStep);
gl_FragColor = texture2D(source, qt_TexCoord0) * qt_Opacity;
if(!insideBox(topLeft, bottomRight, qt_TexCoord0))
gl_FragColor *= alpha;
}
"
}
}
}
Output:
answered Dec 27 '18 at 7:32
eyllanesceyllanesc
74.8k103156
Thanks! it works perfectly(even with video instead of Image)!
– Jiu
Dec 27 '18 at 8:26
1
It can be made withOpacityMasktoo, which usesShaderEffectunderneath. Or 4 semi-transparent rectangles.
– GrecKo
Dec 27 '18 at 8:32
@GrecKo My current source is using 4 rects, but it has to write too much code...ShaderEffect is much graceful than that. And if you post the answer ofOpacityMaskway that will be great :D
– Jiu
Dec 27 '18 at 8:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53939313%2fhow-to-make-part-of-area-transparent-and-the-rest-show-semitransparent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
For these cases you must use ShaderEffect:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("ShaderEffect Example")
Image {
id: image
source: "qrc:/dog.png"
anchors.centerIn: parent
layer.enabled: true
layer.effect: ShaderEffect {
property real alpha: 0.4
property rect sourceRect: Qt.rect(width/4, height/4, width/2, height/2)
property real xStep: 1/width
property real yStep: 1/height
fragmentShader: "
uniform lowp sampler2D source;
varying mediump vec2 qt_TexCoord0;
uniform lowp float qt_Opacity;
uniform highp float alpha;
uniform highp vec4 sourceRect;
uniform highp float xStep;
uniform highp float yStep;
bool insideBox(vec2 topLeft, vec2 bottomRight, vec2 point){
vec2 s = step(topLeft, point) - step(bottomRight, point);
return (s.x * s.y) > 0.0;
}
void main() {
vec2 topLeft = vec2(sourceRect.x*xStep, sourceRect.y*yStep);
vec2 bottomRight = topLeft + vec2(sourceRect.z*xStep, sourceRect.w*yStep);
gl_FragColor = texture2D(source, qt_TexCoord0) * qt_Opacity;
if(!insideBox(topLeft, bottomRight, qt_TexCoord0))
gl_FragColor *= alpha;
}
"
}
}
}
Output:
answered Dec 27 '18 at 7:32
eyllanesceyllanesc
74.8k103156
Thanks! it works perfectly(even with video instead of Image)!
– Jiu
Dec 27 '18 at 8:26
1
It can be made withOpacityMasktoo, which usesShaderEffectunderneath. Or 4 semi-transparent rectangles.
– GrecKo
Dec 27 '18 at 8:32
@GrecKo My current source is using 4 rects, but it has to write too much code...ShaderEffect is much graceful than that. And if you post the answer ofOpacityMaskway that will be great :D
– Jiu
Dec 27 '18 at 8:43
add a comment |
2
For these cases you must use ShaderEffect:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("ShaderEffect Example")
Image {
id: image
source: "qrc:/dog.png"
anchors.centerIn: parent
layer.enabled: true
layer.effect: ShaderEffect {
property real alpha: 0.4
property rect sourceRect: Qt.rect(width/4, height/4, width/2, height/2)
property real xStep: 1/width
property real yStep: 1/height
fragmentShader: "
uniform lowp sampler2D source;
varying mediump vec2 qt_TexCoord0;
uniform lowp float qt_Opacity;
uniform highp float alpha;
uniform highp vec4 sourceRect;
uniform highp float xStep;
uniform highp float yStep;
bool insideBox(vec2 topLeft, vec2 bottomRight, vec2 point){
vec2 s = step(topLeft, point) - step(bottomRight, point);
return (s.x * s.y) > 0.0;
}
void main() {
vec2 topLeft = vec2(sourceRect.x*xStep, sourceRect.y*yStep);
vec2 bottomRight = topLeft + vec2(sourceRect.z*xStep, sourceRect.w*yStep);
gl_FragColor = texture2D(source, qt_TexCoord0) * qt_Opacity;
if(!insideBox(topLeft, bottomRight, qt_TexCoord0))
gl_FragColor *= alpha;
}
"
}
}
}
Output:
answered Dec 27 '18 at 7:32
eyllanesceyllanesc
74.8k103156
Thanks! it works perfectly(even with video instead of Image)!
– Jiu
Dec 27 '18 at 8:26
1
It can be made withOpacityMasktoo, which usesShaderEffectunderneath. Or 4 semi-transparent rectangles.
– GrecKo
Dec 27 '18 at 8:32
@GrecKo My current source is using 4 rects, but it has to write too much code...ShaderEffect is much graceful than that. And if you post the answer ofOpacityMaskway that will be great :D
– Jiu
Dec 27 '18 at 8:43
add a comment |
2
2
2
For these cases you must use ShaderEffect:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("ShaderEffect Example")
Image {
id: image
source: "qrc:/dog.png"
anchors.centerIn: parent
layer.enabled: true
layer.effect: ShaderEffect {
property real alpha: 0.4
property rect sourceRect: Qt.rect(width/4, height/4, width/2, height/2)
property real xStep: 1/width
property real yStep: 1/height
fragmentShader: "
uniform lowp sampler2D source;
varying mediump vec2 qt_TexCoord0;
uniform lowp float qt_Opacity;
uniform highp float alpha;
uniform highp vec4 sourceRect;
uniform highp float xStep;
uniform highp float yStep;
bool insideBox(vec2 topLeft, vec2 bottomRight, vec2 point){
vec2 s = step(topLeft, point) - step(bottomRight, point);
return (s.x * s.y) > 0.0;
}
void main() {
vec2 topLeft = vec2(sourceRect.x*xStep, sourceRect.y*yStep);
vec2 bottomRight = topLeft + vec2(sourceRect.z*xStep, sourceRect.w*yStep);
gl_FragColor = texture2D(source, qt_TexCoord0) * qt_Opacity;
if(!insideBox(topLeft, bottomRight, qt_TexCoord0))
gl_FragColor *= alpha;
}
"
}
}
}
Output:
answered Dec 27 '18 at 7:32
eyllanesceyllanesc
74.8k103156
For these cases you must use ShaderEffect:
import QtQuick 2.9
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("ShaderEffect Example")
Image {
id: image
source: "qrc:/dog.png"
anchors.centerIn: parent
layer.enabled: true
layer.effect: ShaderEffect {
property real alpha: 0.4
property rect sourceRect: Qt.rect(width/4, height/4, width/2, height/2)
property real xStep: 1/width
property real yStep: 1/height
fragmentShader: "
uniform lowp sampler2D source;
varying mediump vec2 qt_TexCoord0;
uniform lowp float qt_Opacity;
uniform highp float alpha;
uniform highp vec4 sourceRect;
uniform highp float xStep;
uniform highp float yStep;
bool insideBox(vec2 topLeft, vec2 bottomRight, vec2 point){
vec2 s = step(topLeft, point) - step(bottomRight, point);
return (s.x * s.y) > 0.0;
}
void main() {
vec2 topLeft = vec2(sourceRect.x*xStep, sourceRect.y*yStep);
vec2 bottomRight = topLeft + vec2(sourceRect.z*xStep, sourceRect.w*yStep);
gl_FragColor = texture2D(source, qt_TexCoord0) * qt_Opacity;
if(!insideBox(topLeft, bottomRight, qt_TexCoord0))
gl_FragColor *= alpha;
}
"
}
}
}
Output:
answered Dec 27 '18 at 7:32
eyllanesceyllanesc
74.8k103156
edited Dec 27 '18 at 8:15
answered Dec 27 '18 at 7:32
eyllanesceyllanesc
74.8k103156
answered Dec 27 '18 at 7:32
eyllanesceyllanesc
74.8k103156
answered Dec 27 '18 at 7:32
eyllanesceyllanesc
74.8k103156
74.8k103156
Thanks! it works perfectly(even with video instead of Image)!
– Jiu
Dec 27 '18 at 8:26
1
It can be made withOpacityMasktoo, which usesShaderEffectunderneath. Or 4 semi-transparent rectangles.
– GrecKo
Dec 27 '18 at 8:32
@GrecKo My current source is using 4 rects, but it has to write too much code...ShaderEffect is much graceful than that. And if you post the answer ofOpacityMaskway that will be great :D
– Jiu
Dec 27 '18 at 8:43
add a comment |
Thanks! it works perfectly(even with video instead of Image)!
– Jiu
Dec 27 '18 at 8:26
1
It can be made withOpacityMasktoo, which usesShaderEffectunderneath. Or 4 semi-transparent rectangles.
– GrecKo
Dec 27 '18 at 8:32
@GrecKo My current source is using 4 rects, but it has to write too much code...ShaderEffect is much graceful than that. And if you post the answer ofOpacityMaskway that will be great :D
– Jiu
Dec 27 '18 at 8:43
Thanks! it works perfectly(even with video instead of Image)!
– Jiu
Dec 27 '18 at 8:26
Thanks! it works perfectly(even with video instead of Image)!
– Jiu
Dec 27 '18 at 8:26
1
1
It can be made with
OpacityMask too, which uses ShaderEffect underneath. Or 4 semi-transparent rectangles.– GrecKo
Dec 27 '18 at 8:32
It can be made with
OpacityMask too, which uses ShaderEffect underneath. Or 4 semi-transparent rectangles.– GrecKo
Dec 27 '18 at 8:32
@GrecKo My current source is using 4 rects, but it has to write too much code...ShaderEffect is much graceful than that. And if you post the answer of
OpacityMask way that will be great :D– Jiu
Dec 27 '18 at 8:43
@GrecKo My current source is using 4 rects, but it has to write too much code...ShaderEffect is much graceful than that. And if you post the answer of
OpacityMask way that will be great :D– Jiu
Dec 27 '18 at 8:43
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53939313%2fhow-to-make-part-of-area-transparent-and-the-rest-show-semitransparent%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
