wagtail-annotations 3.0.0

要求

• Wagtail >= 2.7

• Django >= 2.0

安装

使用pypi安装，并将 wagtail-annotations 添加到您的 INSTALLED_APPS 中

pip install wagtail-annotations

使用

扩展BaseAnnotationForm以定义应与注释一起存储的数据。AnnotationsField将注释数据存储为json，在检索时转换为字典。

from django import forms
from django.db import models
from wagtail.wagtailcore.models import Page
from wagtail_annotations.edit_handlers import AnnotatedImagePanel
from wagtail_annotations.fields import AnnotationsField
from wagtail_annotations.forms import BaseAnnotationForm

class AnnotationForm(BaseAnnotationForm):
    title = forms.CharField()
    about = forms.TextField()

class TestPage(Page):
    image = models.ForeignKey('wagtailimages.Image', blank=True, null=True,
                              on_delete=models.SET_NULL, related_name="+")
    annotations = AnnotationsField(blank=True)

    content_panels = Page.content_panels + [
        # First parameter - name of the image field
        # Second parameter - name of the annotation field
        # annotation_form - optional, the form used for annotations if you need to store data for each point
        AnnotatedImagePanel(
            'image', 'annotations',
            annotation_form=AnnotationForm(), heading='Annotated Image'
        )
    ]

<div class='image-container'>
    {% image page.image('width-500') %}

    {% for annotation in page.annotations %}
    <div
        class='annotation'
        style="left: {{ annotation.x * 100 }}%; top: {{ annotation.y * 100 }}%;"
    >
        <h3>{{ annotation.fields.title }}</h3>
        <p>{{ annotation.fields.about }}</p>
    </div>
    {% endfor %}
</div>

.image-container {
    position: relative;
}

.image-container > img {
    width: 100%;
    height: auto;
}

.annotation {
    position: absolute;
}

开发

您可以使用包含的测试应用进行开发

> npm install && npm run build
> pip install -e .
> export DJANGO_SETTINGS_MODULE=settings
> django-admin migrate
> django-admin createsuperuser
...
> django-admin runserver

有一个包含用于测试的chromerdriver的Dockerfile，如果您没有安装chromedriver，可以本地构建和运行它

> docker build -f Dockerfile.test -t annotation-test .
> docker run annotation-test
> docker run -e WAGTAIL_VERSION=27 -e DJANGO_VERSIONS='30,31' annotation-test