स्टेट प्रिज़र्वेशन और परसिस्टेंट स्टोरेज, इंक वाले ऐप्लिकेशन के लिए ज़रूरी पहलू हैं. खास तौर पर, Compose में. ब्रश प्रॉपर्टी और स्ट्रोक बनाने वाले पॉइंट जैसे मुख्य डेटा ऑब्जेक्ट जटिल होते हैं और अपने-आप सेव नहीं होते. इसके लिए, कॉन्फ़िगरेशन में बदलाव और उपयोगकर्ता की ड्रॉइंग को डेटाबेस में हमेशा के लिए सेव करने जैसे मामलों में, स्थिति को सेव करने के लिए एक रणनीति की ज़रूरत होती है.
स्टेट को बनाए रखना
Jetpack Compose में, यूज़र इंटरफ़ेस (यूआई) की स्थिति को आम तौर पर remember और rememberSaveable का इस्तेमाल करके मैनेज किया जाता है.
rememberSaveable कॉन्फ़िगरेशन में बदलाव होने पर, स्थिति को अपने-आप सेव करता है. हालांकि, इसमें पहले से मौजूद सुविधाएं सिर्फ़ प्रिमिटिव डेटा टाइप और Parcelable या Serializable को लागू करने वाले ऑब्जेक्ट के लिए उपलब्ध हैं.
Brush जैसी मुश्किल प्रॉपर्टी वाले कस्टम ऑब्जेक्ट के लिए, आपको साफ़ तौर पर सीरियलाइज़ेशन और डीसीरियलाइज़ेशन के तरीके तय करने होंगे. इसके लिए, कस्टम स्टेट सेवर का इस्तेमाल किया जा सकता है. Brush ऑब्जेक्ट के लिए कस्टम Saver तय करके, कॉन्फ़िगरेशन में बदलाव होने पर भी इसके ज़रूरी एट्रिब्यूट को सुरक्षित रखा जा सकता है. जैसा कि यहां दिए गए brushStateSaver उदाहरण में दिखाया गया है.
fun brushStateSaver(converters: Converters): Saver<MutableState<Brush>, String> = Saver(
save = { state ->
converters.brushToString(state.value)
},
restore = { jsonString ->
val brush = converters.stringToBrush(jsonString)
mutableStateOf(brush)
}
)
इसके बाद, चुने गए ब्रश की स्थिति को बनाए रखने के लिए, कस्टम Saver का इस्तेमाल किया जा सकता है:
val converters = Converters()
val currentBrush = rememberSaveable(saver = brushStateSaver(converters)) { mutableStateOf(defaultBrush) }
परसिस्टेंट स्टोरेज
To enable features such as document saving, loading, and potential real-time collaboration, store strokes and associated data in a serialized format. For the Ink API, manual serialization and deserialization are necessary.
To accurately restore a stroke, save its Brush and StrokeInputBatch.
Brush: Includes numeric fields (size, epsilon), color, andBrushFamily.StrokeInputBatch: A list of input points with numeric fields.
The Storage module simplifies compactly serializing the most complex part: the
StrokeInputBatch.
To save a stroke:
- Serialize the
StrokeInputBatchusing the storage module's encode function. Store the resulting binary data. - Separately save the essential properties of the stroke's Brush:
- The enum that represents the brush family &mdash Although the instance can be serialized, this is not efficient for apps that use a limited selection of brush families
colorLongsizeepsilon
fun serializeStroke(stroke: Stroke): SerializedStroke {
val serializedBrush = serializeBrush(stroke.brush)
val encodedSerializedInputs = ByteArrayOutputStream().use
{
stroke.inputs.encode(it)
it.toByteArray()
}
return SerializedStroke(
inputs = encodedSerializedInputs,
brush = serializedBrush
)
}
To load a stroke object:
- Retrieve the saved binary data for the
StrokeInputBatchand deserialize it using the storage module's decode() function. - Retrieve the saved
Brushproperties and create the brush. Create the final stroke using the recreated brush and the deserialized
StrokeInputBatch.fun deserializeStroke(serializedStroke: SerializedStroke): Stroke { val inputs = ByteArrayInputStream(serializedStroke.inputs).use { StrokeInputBatch.decode(it) } val brush = deserializeBrush(serializedStroke.brush) return Stroke(brush = brush, inputs = inputs) }
Handle zoom, pan, and rotation
If your app supports zooming, panning, or rotation, you must provide the current
transformation to InProgressStrokes. This helps newly drawn strokes match the
position and scale of your existing strokes.
You do this by passing a Matrix to the pointerEventToWorldTransform
parameter. The matrix should represent the inverse of the transformation you
apply to your finished strokes canvas.
@Composable
fun ZoomableDrawingScreen(...) {
// 1. Manage your zoom/pan state (e.g., using detectTransformGestures).
var zoom by remember { mutableStateOf(1f) }
var pan by remember { mutableStateOf(Offset.Zero) }
// 2. Create the Matrix.
val pointerEventToWorldTransform = remember(zoom, pan) {
android.graphics.Matrix().apply {
// Apply the inverse of your rendering transforms
postTranslate(-pan.x, -pan.y)
postScale(1 / zoom, 1 / zoom)
}
}
Box(modifier = Modifier.fillMaxSize()) {
// ...Your finished strokes Canvas, with regular transform applied
// 3. Pass the matrix to InProgressStrokes.
InProgressStrokes(
modifier = Modifier.fillMaxSize(),
pointerEventToWorldTransform = pointerEventToWorldTransform,
defaultBrush = currentBrush,
nextBrush = onGetNextBrush,
onStrokesFinished = onStrokesFinished
)
}
}
Export strokes
आपको अपने स्ट्रोक सीन को स्टैटिक इमेज फ़ाइल के तौर पर एक्सपोर्ट करना पड़ सकता है. यह सुविधा, ड्राइंग को अन्य ऐप्लिकेशन के साथ शेयर करने, थंबनेल जनरेट करने या कॉन्टेंट का ऐसा वर्शन सेव करने के लिए काम आती है जिसमें बदलाव नहीं किया जा सकता.
किसी सीन को एक्सपोर्ट करने के लिए, अपने स्ट्रोक को सीधे स्क्रीन पर रेंडर करने के बजाय, ऑफ़स्क्रीन बिटमैप पर रेंडर किया जा सकता है. Android's Picture API का इस्तेमाल करें. इसकी मदद से, कैनवस पर ड्राइंग रिकॉर्ड की जा सकती हैं. इसके लिए, यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट का दिखना ज़रूरी नहीं है.
इस प्रोसेस में, Picture इंस्टेंस बनाना, Canvas पाने के लिए beginRecording() को कॉल करना, और फिर अपने मौजूदा CanvasStrokeRenderer का इस्तेमाल करके, उस Canvas पर हर स्ट्रोक बनाना शामिल है. ड्राइंग से जुड़े सभी निर्देश रिकॉर्ड करने के बाद, Picture का इस्तेमाल करके Bitmap बनाया जा सकता है. इसके बाद, इसे कंप्रेस करके किसी फ़ाइल में सेव किया जा सकता है.
fun exportDocumentAsImage() {
val picture = Picture()
val canvas = picture.beginRecording(bitmapWidth, bitmapHeight)
// The following is similar logic that you'd use in your custom View.onDraw or Compose Canvas.
for (item in myDocument) {
when (item) {
is Stroke -> {
canvasStrokeRenderer.draw(canvas, stroke, worldToScreenTransform)
}
// Draw your other types of items to the canvas.
}
}
// Create a Bitmap from the Picture and write it to a file.
val bitmap = Bitmap.createBitmap(picture)
val outstream = FileOutputStream(filename)
bitmap.compress(Bitmap.CompressFormat.PNG, 100, outstream)
}
Data object and converter helpers
Define a serialization object structure that mirrors needed Ink API objects.
Use the Ink API's storage module to encode and decode StrokeInputBatch.
Data transfer objects
@Parcelize
@Serializable
data class SerializedStroke(
val inputs: ByteArray,
val brush: SerializedBrush
) : Parcelable {
override fun equals(other: Any?): Boolean {
if (this === other) return true
if (other !is SerializedStroke) return false
if (!inputs.contentEquals(other.inputs)) return false
if (brush != other.brush) return false
return true
}
override fun hashCode(): Int {
var result = inputs.contentHashCode()
result = 31 * result + brush.hashCode()
return result
}
}
@Parcelize
@Serializable
data class SerializedBrush(
val size: Float,
val color: Long,
val epsilon: Float,
val stockBrush: SerializedStockBrush,
val clientBrushFamilyId: String? = null
) : Parcelable
enum class SerializedStockBrush {
Marker,
PressurePen,
Highlighter,
DashedLine,
}
Converters
object Converters {
private val stockBrushToEnumValues = mapOf(
StockBrushes.marker() to SerializedStockBrush.Marker,
StockBrushes.pressurePen() to SerializedStockBrush.PressurePen,
StockBrushes.highlighter() to SerializedStockBrush.Highlighter,
StockBrushes.dashedLine() to SerializedStockBrush.DashedLine,
)
private val enumToStockBrush =
stockBrushToEnumValues.entries.associate { (key, value) -> value to key
}
private fun serializeBrush(brush: Brush): SerializedBrush {
return SerializedBrush(
size = brush.size,
color = brush.colorLong,
epsilon = brush.epsilon,
stockBrush = stockBrushToEnumValues[brush.family] ?: SerializedStockBrush.Marker,
)
}
fun serializeStroke(stroke: Stroke): SerializedStroke {
val serializedBrush = serializeBrush(stroke.brush)
val encodedSerializedInputs = ByteArrayOutputStream().use { outputStream ->
stroke.inputs.encode(outputStream)
outputStream.toByteArray()
}
return SerializedStroke(
inputs = encodedSerializedInputs,
brush = serializedBrush
)
}
private fun deserializeStroke(
serializedStroke: SerializedStroke,
): Stroke? {
val inputs = ByteArrayInputStream(serializedStroke.inputs).use { inputStream ->
StrokeInputBatch.decode(inputStream)
}
val brush = deserializeBrush(serializedStroke.brush, customBrushes)
return Stroke(brush = brush, inputs = inputs)
}
private fun deserializeBrush(
serializedBrush: SerializedBrush,
): Brush {
val stockBrushFamily = enumToStockBrush[serializedBrush.stockBrush]
val brushFamily = customBrush?.brushFamily ?: stockBrushFamily ?: StockBrushes.marker()
return Brush.createWithColorLong(
family = brushFamily,
colorLong = serializedBrush.color,
size = serializedBrush.size,
epsilon = serializedBrush.epsilon,
)
}
}