Açıklamalar

Doconut'taki açıklamalar iki yönde çalışır: kullanıcılar bunları tarayıcı widget'ında çizer ve sunucu sayfa başına saklar, ya da kodunuz bunları programlı olarak oluşturur ve açık bir oturuma yükler. Her iki durumda da sayfalarda görüntülenir ve PDF/PNG dışa aktarımlara yanmış olarak eklenebilir.

Açıklama desteği, Annotation lisans yeteneğiyle (aktif Geçici lisans altında otomatik olarak verilir) kısıtlanmıştır.

Açıklama UI'sini Etkinleştir

Açıklama, bağımsız bir araç çubuğu değil bir Viewer modülüdür. Tam sayfa, Viewer kaynaklarını, Viewer araç çubuğunu, Viewer bağlamasını ve başlatılmış objViewer'ı içermelidir; ardından Açıklama Şeridi aynı örneğe monte edilir ve eklenir.

Açıklama paketlerini viewer paketleriyle birlikte yayınlayın — lisans kısıtlamalıdırlar, bu yüzden yetenek mevcut olduğunda etiketler görünür:

@Html.Raw(Viewer.ReferenceCss(new CssConfig
{
    IncludeViewerCss     = true,
    IncludeAnnotationCss = true   // jquery-ui.min.css + annotationBar.css
}))

@Html.Raw(Viewer.ReferenceScripts(new ScriptConfig
{
    IncludeJQuery             = true,
    IncludeViewerScripts      = true,
    IncludeAnnotationScripts  = true, // jquery-ui, raphael.js, annotation.js
    IncludeAnnotationBar      = true  // the embedded annotation ribbon
}))

Tam Viewer bileşenini işaretlemede görünür tutun:

<nav id="toolbar" aria-label="Document viewer controls">
    <!-- Viewer controls, including the button that opens Annotation -->
</nav>
<div id="annBarMount"></div>
<div id="divDocViewer"><div id="div_ctlDoc"></div></div>

Açıklama paketi, annBarMount içinde Şerit DOM'unu oluşturur; düğmelerini veya iletişim kutusu işaretlemesini kopyalamanıza gerek yoktur. Önce docViewer'ı başlatın, ardından sunucu Açıklamanın lisanslı olduğunu onayladığında Şeridi oluşturun:

<script>
    let annBar = null;
    let currentToken = '';

    const objViewer = $('#div_ctlDoc').docViewer({
        BasePath: '/doconut',
        ResPath: '/doconut-res/images',
        onAnnLoaded:    () => annBar?.handleAnnLoaded(),
        onAnnSaved:     () => annBar?.handleAnnSaved(),
        onAnnSaveError: () => annBar?.handleAnnSaveError(),
        onAnnClosed:    () => annBar?.handleAnnClosed(),
        onError:        (message) => console.error('Viewer error:', message)
    });

    @if (Viewer.IsAnnotationEnabled)
    {
        <text>
    annBar = $('#annBarMount').doconutAnnotationBar({
        docId: 'ctlDoc',
        getRequestParams: () => ({ token: currentToken }),
        onStatus: (message) => console.log(message),
        onToast: (message, type) => console.log(type, message),
        onLayout: () => requestAnimationFrame(() => objViewer.Refit())
    });
    annBar.attach(objViewer);
        </text>
    }
</script>

Şeritten kaydetme, ara katman (AnnSave) üzerinden veri gönderir ve bunu sayfa başına belge oturumunda saklar. Yükleme (AnnLoad) bir sayfada açıklamalar varsa otomatik olarak gerçekleşir. Dört onAnn* geri çağrısı, Şeridin viewer yaşam döngüsüyle senkronize kalmasını sağlar.

Herhangi bir host‑sahibi Viewer araç çubuğundan açıp kapatabilirsiniz:

annBar.open();
annBar.close();

Genel Şerit API'si şunlardır:

onStatus, onToast, onLayout, onEditStart ve onEditEnd isteğe bağlı host geri çağrılarıdır. endpoints nesnesi ayrıca exportPdf, exportPng, imageUpload ve imageList sağlayabilir; yapılandırılmamış bir uç nokta gizli kalır. Birleştirilmiş Viewer, Search ve Annotation başlangıç sırası için Hızlı Başlangıç'a bakın: Hızlı Başlangıç.

Açıklama paketi tarayıcı yazar araçlarını ekler, ancak veri hâlâ token ile tanımlanan sunucu‑tarafı belge oturumuna aittir. Kaynağı yeniden açmak yeni bir oturum oluşturur; açıklamaların oturum ömründen sonra da kalmasını istiyorsanız XML'i veya kodlanmış açıklama zarfını uygulamanızda saklayın.

C#'ta Açıklamaları Oluşturun

Açık oturuma bağlı bir yönetici alın, açıklamaları ekleyin ve yükleyin (using Doconut.Annotations; tipler için ve using System.Drawing; Rectangle/Color için):

app.MapPost("/api/annotations/load-sample", (string token, Viewer viewer) =>
{
    // Bound to the open session's page dimensions
    var manager = viewer.GetAnnotationManager(token);
    var pageCount = viewer.GetPageCount(token);

    // One stamp per page
    for (int page = 1; page <= pageCount; page++)
    {
        manager.Add(new StampAnnotation(page, new Rectangle(30, 20, 240, 90),
            $"PAGE {page}", 28, 4, Color.Maroon)
        {
            Opacity = 60,
            Rotate  = -8
        });
    }

    manager.Add(new NoteAnnotation(1, new Rectangle(420, 150, 220, 120),
        "Loaded from C# code.", Color.FromArgb(255, 255, 255, 170), 14));

    // Load into the session — the widget fetches them via AnnLoad and the
    // renderer burns them into image/PDF exports.
    viewer.LoadAnnotationData(token, manager);
    return Results.Ok();
});

Açıklama Türleri

Tüm türler Doconut.Annotations içinde bulunur ve BaseAnnotation (sayfa numarası + sınırlayıcı Rectangle) üzerinden miras alır:

AnnotationManager API'si

Viewer, bir oturuma karşı yükleme/okuma işlemlerini yansıtır: LoadAnnotationData(token, manager) veya LoadAnnotationData(token, encodedData) (GetAnnotationData()'dan gelen Base64 kablo zarfı), LoadAnnotationXML(token, xml), GetAnnotationXML(token).

Açıklamaların Yanmış Olduğu Dışa Aktarım

// PDF of all pages with annotations rendered onto them
app.MapGet("/api/annotations/export-pdf", async (string token, Viewer viewer) =>
{
    byte[] pdf = await viewer.ExportAnnotationsToPdfAsync(token, zoom: 100);
    return Results.File(pdf, "application/pdf", "export.pdf");
});

// Or a ZIP of per-page PNGs
app.MapGet("/api/annotations/export-png-zip", async (string token, Viewer viewer) =>
{
    byte[] zip = await viewer.ExportAnnotationsToPngZipAsync(token, zoom: 100);
    return Results.File(zip, "application/zip", "annotations-png.zip");
});

Dışa aktarmalar, ekrandaki işleme ile aynı yanma motorunu kullanır; kullanıcıların gördüğü dosyanın içeriğidir.

Kalıcılık İş Akışı

1. Belgeyi açın ve token'ını alın.
2. Daha önce saklanmış XML'i veya kodlanmış veriyi o token'a yükleyin.
3. Widget'ın oturum açıklamalarını okumasına ve düzenlemesine izin verin.
4. Uygulamanız kalıcı hale getirmeye karar verdiğinde GetAnnotationXML(token) ile XML'i alın.
5. Düzleştirilmiş bir teslimat gerektiğinde PDF/PNG dışa aktarın.
6. Belge oturumunu kapatın.

Opak viewer token'ını kalıcı bir açıklama tanımlayıcısı olarak kullanmayın. Kalıcılaştırılmış açıklama verisini kendi belge ve sürüm tanımlayıcılarınızla ilişkilendirin.

Güvenlik ve İşleme Notları

• Açıklama istekleri, sayfa istekleriyle aynı oturum/token güvenliğini kullanır.
• Göreceli ImageAnnotation URL'si istek sunucusundan çözülür ve yanma zamanında sunucuya erişilebilir olmalıdır.
• Kullanıcı tarafından sağlanan görüntü URL'lerini doğrulayın ve kontrol edin, sunucu tarafı istek sahteciliğini önlemek için.
• Dışa aktarmalar, ekrandaki sayfa işleme ile aynı lisans/özel filigran kararını uygular.
• Büyük serbest el yükleri ve yüksek çözünürlüklü dışa aktarmalar bellek kullanımını artırır; gerçekçi belgeler ve yakınlaştırma değerleriyle test edin.

Sorun Giderme