I'm developing a photo editing app, in that I have a feature to add the image to other image as transparent after editing in the app. So I can able to erase the background of the image. But I don't know how to move the background erased image to other screen , like how we do for the normal image. Now if I move the transparent part appeared as grey part. you can see that image. Help me to solve this. Thank you.
[
Canvas(
modifier = drawModifier
.onGloballyPositioned {
capturingViewBounds.value = it.boundsInWindow()
}
) {
val canvasWidth = size.width.roundToInt()
val canvasHeight = size.height.roundToInt()
val width = this.size.width
val height = this.size.height
val checkerWidth = 10.dp.toPx()
val checkerHeight = 10.dp.toPx()
val horizontalSteps = (width / checkerWidth).toInt()
val verticalSteps = (height / checkerHeight).toInt()
for (y in 0..verticalSteps) {
for (x in 0..horizontalSteps) {
val isGrayTile = ((x + y) % 2 == 1)
drawRect(
color = if (isGrayTile) Color.LightGray else Color.White,
topLeft = Offset(x * checkerWidth, y * checkerHeight),
size = Size(checkerWidth, checkerHeight)
)
}
}
val space = 20.dp.roundToPx()
with(drawContext.canvas.nativeCanvas) {
val checkPoint = saveLayer(null, null)
drawImage(
image = dstBitmap,
dstOffset = IntOffset(space / 2, space / 2),
dstSize = IntSize(canvasWidth - space, canvasHeight - space)
)
clipBounds
drawPath(
color = Color.Transparent,
path = erasePath,
style = Stroke(
width = 30f,
cap = StrokeCap.Round,
join = StrokeJoin.Round
),
blendMode = BlendMode.Clear
)
restoreToCount(checkPoint)
}
}
Related
Here is my code;
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
){
Canvas(
modifier = Modifier
.fillMaxSize(0.5f)
.border(1.dp, Color.Red)
){
drawRect(
color =Color.Black,
size = size,
style = Stroke(
width = 100f
)
)
}
}
}
Result;
I want the thickness to increase from the inside or outside of the red line, NOT both side. How can i achieve this?
You have to consider the offset and the width of the Rect.
To draw outside you can use:
val width = 100f
drawRect(
topLeft = Offset(-width/2, -width/2),
color =Color.Black,
size = Size(size.width + width, size.height + width),
style = Stroke(
width = width
)
)
To draw inside:
val width = 100f
drawRect(
topLeft = Offset(+ width/2, + width/2),
color =Color.Black,
size = Size(size.width - width, size.height - width),
style = Stroke(
width = width
)
)
I couldnt able to find any direct solution modifying stroke placement with inner or outer.
But here is a way to achieve it,by increasing/ decreasing size and offset.
Here size(width and height) is increased by the (stroke value+size) of rect. And topleft offset will hold (-0.5*stroke value). Here it will increase size of rect and moves slightly left*top from topleft.
drawRect(
color = Color.Black,
size = Size(size.width+100f,size.height+100f),
style = Stroke(
width = 100f
),
topLeft = Offset(-50f,-50f),
)
Here size(width and height) is increased by the (size-stroke value) of rect. And topleft offset will hold (0.5*stroke value). Here it will decrease size of rect and moves slightly right & bottom from topleft.
drawRect(
color = Color.Black,
size = Size(size.width-100f,size.height-100f),
style = Stroke(
width = 100f
),
topLeft = Offset(50f,50f),
)
You need to offset draw position. Border is drawn from center position to both sides in Canvas so offset it by half of your stroke width and reduce size as stroke width. Also using, for instance 20.dp.px instead of 100f will make sure that your borderSroke will look similar on every device.
#Composable
fun BorderCanvasSample() {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
Canvas(
modifier = Modifier
.fillMaxSize(0.5f)
.border(1.dp, Color.Red)
) {
val borderStroke = 100f
val halfStore = borderStroke / 2
drawRect(
color = Color.Black,
topLeft = Offset(halfStore, halfStore),
size = Size(
width = size.width - borderStroke,
height = size.height - borderStroke
),
style = Stroke(
width = borderStroke
)
)
}
}
}
I'm use Jetpack Compose Canvas to draw a division circle. The min value of the division circle is 20, and the max value of the division circle is 120.
So I write the Code A, and I get the result Image A as expected except the label.
From the Image A, I find the label 0, 20, 40 are on good position, and the label 60, 80, 100, 120 are not on good position.
1: It seems that I need to measure the height and width of a text,then adjust the position of the text, if so, how can I measure the height and width of a text?
2: Is there other way to place these text on apposite position without measurement the height and width of text?
Code A
#Composable
fun setCanvas(maxCountList: MaxCountList<Double>) {
Canvas(
modifier = Modifier
) {
val axisPaint = Paint()
val textPaint = TextPaint()
drawIntoCanvas {
val orig = MyPoint(size.width / 2, size.height / 2)
val temp = min(size.height, size.width)
val radius = temp / 2 - 10
it.drawCircle(Offset(x = 0f.toX(orig), y = 0f.toY(orig)), radius, axisPaint)
val lineOffset = 5.0f
val lineLength = 20.0f
val labelOffset = 10.0f
val point1 = radius - lineOffset
val point2 = radius - lineOffset - lineLength
val point3 = radius - lineOffset - lineLength - labelOffset
(0..6).forEach { i ->
val radians = Math.toRadians(225 - i * 45.0)
val x1 = point1 * cos(radians).toFloat()
val x2 = point2 * cos(radians).toFloat()
val x3 = point3 * cos(radians).toFloat()
val y1 = point1 * sin(radians).toFloat()
val y2 = point2 * sin(radians).toFloat()
val y3 = point3 * sin(radians).toFloat()
it.drawLine(
Offset(x = x1.toX(orig), y = y1.toY(orig)),
Offset(x = x2.toX(orig), y = y2.toY(orig)),
axisPaint
)
val label=(i * 20).toString()
it.nativeCanvas.drawText(label, x3.toX(orig), y3.toY(orig), textPaint)
}
}
}
}
//Convert X to new coordinate
fun Float.toX(originCoordinate: MyPoint) :Float {
return originCoordinate.x+this
}
//Convert Y to new coordinate
fun Float.toY(originCoordinate: MyPoint):Float {
return originCoordinate.y-this
}
class MyPoint (val x:Float, val y: Float)
Image A
you can use TextMeasurer.measure in jetpack compose 1.3.0-alpha2 onwards
you can check samples here
https://android-review.googlesource.com/c/platform/frameworks/support/+/2135315/4/compose/foundation/foundation/integration-tests/foundation-demos/src/main/java/androidx/compose/foundation/demos/text/DrawTextDemo.kt
suppose i have simple composable fun which has Canvas.
Canvas(modifier = Modifier
.padding(start = 60.dp, end = 60.dp)
.fillMaxSize(),
onDraw = {
val w = size.width
val h = size.height
val s1LineOffset = w / 4 - 10
val s2LineOffset = w * 3 / 8 - 10
drawImage(
image = ImageBitmap.imageResource(
res = resources,
id = R.drawable.bttn
),
topLeft = Offset(
x = b1StartOffset,
y = 0f
)
)
}
)
I want to define the state of animation using the canvas sizes for initial and target value but i cant do so because i can't use this inside draw scope thats why i have to use it above the Canvas block, hence cant access Canvas size what should i do
val anim by ballAnim.animateFloat(
initialValue = ,
targetValue =,
animationSpec =
)
It is more of a simple job. Just create and remember a MutableState<T> value, then update it inside Canvas. For example,
var canvasSize by remember { mutableStateOf(IntSize()) }
Canvas(modifier = Modifier
.padding(start = 60.dp, end = 60.dp)
.fillMaxSize(),
onDraw = {
canvasSize = size //Assign it here
val w = size.width
val h = size.height
val s1LineOffset = w / 4 - 10
val s2LineOffset = w * 3 / 8 - 10
drawImage(
image = ImageBitmap.imageResource(
res = resources,
id = R.drawable.bttn
),
topLeft = Offset(
x = b1StartOffset,
y = 0f
)
)
}
)
val anim by ballAnim.animateFloat(
initialValue = canvasSize.width,
targetValue = canvasSize.height, //whatever
animationSpec = spring()
)
One of the options is animating some normalized value and denormalizing it using size inside onDraw, e.g.:
val animNormalized by ballAnim.animateFloat(
initialValue = 0.5,
targetValue = 0.8,
animationSpec =
)
Canvas(modifier = Modifier
.padding(start = 60.dp, end = 60.dp)
.fillMaxSize(),
onDraw = {
val w = size.width
val h = size.height
val anim = animNormalized * w
...
}
)
I had a question about making this view in Compose and I have no idea about implementing it.
My current code looks like this:
Box(
modifier = Modifier
.fillMaxSize()
.height(300.dp)
) {
Canvas(modifier = Modifier.matchParentSize()) {
drawRoundRect(
color = Color.Yellow,
cornerRadius = CornerRadius(16.dp.toPx(), 16.dp.toPx())
)
drawRoundRect(
color = Color.White,
topLeft = Offset(
x = size.width / 5,
y = size.height - 60.dp.toPx()
),
size = Size((size.width / 5) * 3, 50.dp.toPx() * 2),
cornerRadius = CornerRadius(24.dp.toPx(), 24.dp.toPx()),
)
}
Box(
modifier = Modifier
.fillMaxSize()
.padding(16.dp)
) {
Text(
text = "Test",
modifier = Modifier.align(Alignment.BottomCenter)
)
}
}
Result is the following:
To clip some path from an other path, you can use clipPath.
And to outer corner radius, you need to add arcs to the path manually, like this:
Canvas(modifier = Modifier.matchParentSize()) {
val outerCornerRadius = 16.dp.toPx()
val clippedPath = Path().apply {
val innerCornerRadius = 24.dp.toPx()
val rectSize = Size(round((size.width / 5) * 3), round(50.dp.toPx() * 2))
val rect = Rect(
offset = Offset(
x = (size.width - rectSize.width) / 2,
y = size.height - rectSize.height
),
size = rectSize
)
addRoundRect(
RoundRect(
rect,
topLeft = CornerRadius(x = innerCornerRadius, y = innerCornerRadius),
topRight = CornerRadius(x = innerCornerRadius, y = innerCornerRadius),
)
)
val outerCornerDiameter = outerCornerRadius * 2
val cornerSize = Size(outerCornerDiameter,outerCornerDiameter)
val cornerOffset = Offset(outerCornerDiameter, outerCornerDiameter)
val cornerYOffset = Offset(0f, outerCornerDiameter)
moveTo(rect.bottomLeft - cornerYOffset)
addArc(
Rect(
offset = rect.bottomLeft - cornerOffset,
size = cornerSize
),
startAngleDegrees = 0f,
sweepAngleDegrees = 90f,
)
lineTo(rect.bottomLeft)
moveTo(rect.bottomRight - cornerYOffset)
addArc(
Rect(
offset = rect.bottomRight - cornerYOffset,
size = cornerSize
),
startAngleDegrees = 180f,
sweepAngleDegrees = -90f,
)
lineTo(rect.bottomRight)
}
clipPath(clippedPath, clipOp = ClipOp.Difference) {
drawRoundRect(
color = Color.Yellow,
cornerRadius = CornerRadius(outerCornerRadius, outerCornerRadius)
)
}
}
Result:
Also you can use a custom Shape for your Composables to give them a specific outline. Just extend the Shape interface and override the createOutline() method.
Example:
For the corners, the Path API offers a function arcTo(). Then, to draw the edges of the shape, use the lineTo() method.
class RoundedRectOutlinedCorner(
private val cornerRadius: Dp = 16.dp,
private val cutOutHeight: Dp = 60.dp,
private val cutOutWidth: Dp = 145.dp
) : Shape {
override fun createOutline(
size: Size, layoutDirection: LayoutDirection, density: Density
): Outline {
return Outline.Generic(Path().apply {
val cornerRadius = with(density) { cornerRadius.toPx() }
val cutOutHeight = with(density) { cutOutHeight.toPx() }
val cutOutWidth = with(density) { cutOutWidth.toPx() }
arcTo(
rect = Rect(offset = Offset(0f, 0f), Size(cornerRadius, cornerRadius)),
startAngleDegrees = 180f,
sweepAngleDegrees = 90f,
forceMoveTo = false
)
lineTo(size.width - cutOutWidth - cornerRadius, 0f)
arcTo(
rect = Rect(
offset = Offset(size.width - cutOutWidth - cornerRadius, 0f),
Size(cornerRadius, cornerRadius)
), startAngleDegrees = 270.0f, sweepAngleDegrees = 90f, forceMoveTo = false
)
lineTo(size.width - cutOutWidth, cutOutHeight - cornerRadius)
arcTo(
rect = Rect(
offset = Offset(size.width - cutOutWidth, cutOutHeight - cornerRadius),
Size(cornerRadius, cornerRadius)
), startAngleDegrees = 180.0f, sweepAngleDegrees = -90f, forceMoveTo = false
)
lineTo(size.width - cornerRadius, cutOutHeight)
arcTo(
rect = Rect(
offset = Offset(size.width - cornerRadius, cutOutHeight),
Size(cornerRadius, cornerRadius)
), startAngleDegrees = 270f, sweepAngleDegrees = 90f, forceMoveTo = false
)
lineTo(size.width, size.height - cornerRadius)
arcTo(
rect = Rect(
offset = Offset(size.width - cornerRadius, size.height - cornerRadius),
Size(cornerRadius, cornerRadius)
), startAngleDegrees = 0f, sweepAngleDegrees = 90f, forceMoveTo = false
)
lineTo(cornerRadius, size.height)
arcTo(
rect = Rect(
offset = Offset(0f, size.height - cornerRadius),
Size(cornerRadius, cornerRadius)
), startAngleDegrees = 90f, sweepAngleDegrees = 90f, forceMoveTo = false
)
close()
})
}
}
Usage:
Then, you can clip a shape with:
Modifier
.height(250.dp)
.clip(RoundedRectOutlinedCorner()),
Or with .graphicsLayer/.background etc.
Result:
How can I plot an array to an imageview as a graph?
I've been testing this in Playground and it works, but how can plot this as an imageview in an actual project?
let sineArraySize = 64
let frequency1 = 4.0
let phase1 = 0.0
let amplitude1 = 2.0
let sineWave = (0..<sineArraySize).map {
amplitude1 * sin(2.0 * M_PI / Double(sineArraySize) * Double($0) * frequency1 + phase1)
}
func plotArrayInPlayground<T>(arrayToPlot:Array<T>, title:String) {
for currentValue in arrayToPlot {
XCPCaptureValue(title, currentValue)
}
}
plotArrayInPlayground(sineWave, "Sine wave 1")
One way you could do this:
// this function creates a plot of an array of doubles where it scales to the provided width and the x-axis is on half height
func plotArray(arr: [Double], width: Double, height: Double) -> NSImage {
if arr.isEmpty { return NSImage() }
let xAxisHeight = height / 2
let increment = width / Double(arr.count)
let image = NSImage(size: NSSize(width: width, height: height))
image.lockFocus()
// set background color
NSColor.whiteColor().set()
NSRectFill(NSRect(x: 0, y: 0, width: width, height: height))
let path = NSBezierPath()
// line width of plot
path.lineWidth = 5
path.moveToPoint(NSPoint(x: 0, y: arr[0] * increment + xAxisHeight))
var i = increment
for value in dropFirst(sineWave) {
path.lineToPoint(NSPoint(x: i, y: value * increment + xAxisHeight))
i += increment
}
// set plot color
NSColor.blueColor().set()
path.stroke()
image.unlockFocus()
return image
}
var imageView = NSImageView()
imageView.image = plotArray(sineWave, 500, 200)
// have fun