<div>Hi,
I have created a background.qml. It contrains Canvas and Image. When I scale the app the logo image
get distorted. So, how to scale canvas and image?</div>
<div></div>
<div></div>
<div>import QtQuick 2.7
import QtGraphicalEffects 1.0</div>
<div>Rectangle {
property alias gradBegin: secGradBegin.color
property alias gradEnd: secGradEnd.color
property real beginCutRatio: 0.33
property int headerHeight: secCanvas.height</div>
<div> id: secRoot</div>
<div> Canvas {
</div>
<div>property int beginCut: height * 0.7
property int widthOffset: width * 0.1
id: secCanvas</div>
<div> width: parent.width
height: parent.height * secRoot.beginCutRatio
antialiasing: true
renderTarget: Canvas.Image
onPaint: {
var ctx = getContext(“2d”)
ctx.reset()</div>
<div> ctx.beginPath()
ctx.rect(0, 0, width, beginCut)
ctx.moveTo(-widthOffset, beginCut)
ctx.bezierCurveTo(-widthOffset, height, width + widthOffset,
height, width + widthOffset, beginCut)</div>
<div> ctx.closePath()
ctx.fill()
ctx.clip()
}
visible: false
}</div>
<div> Image {
id: secImage
fillMode: Image.Stretch
anchors.fill: secCanvas
sourceSize.width: parent.width
sourceSize.height: secCanvas.height
smooth: true
visible: false
source: “../../../assets/logo.png”
}</div>
<div> LinearGradient {
id: secGradient
anchors.fill: secRoot
gradient: Gradient {
GradientStop {
id: secGradBegin
position: 0.0
}
GradientStop {
id: secGradEnd
position: 1.0
}
}
}</div>
<div> OpacityMask{
source: secImage
maskSource: secCanvas
width: parent.width
height: secCanvas.height
}
}</div>
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
You must be logged in to reply to this topic.