HTML Canvas'da Yakınlaştırma Kullanıcı Arabirimi

Question

HTML Canvas'da bir ZUI (yakınlaştırma kullanıcı arabirimi) oluşturmak için bir görevle karşılaştım. Bu arayüzlerin örnekleri Deep Zoom ve Microsoft'un Seadragon'udur.

ZUI'yi kendi başıma yazmadan oluşturmama izin verecek bazı kütüphaneler bulmaya çalışıyorum (Mac ve iOS için zaten yapmıştım). vektör grafikleri, görünümlerinde metin ve resimleri (isteğe bağlı) çizin

1. temel unsurları olarak görüşleri 'çeşit var ve hiyerarşik
2. bunları düzenlemek:

   ---

   temel özellikleri kütüphane olması gerektiğini

3. 200x kez
(yukarı/aşağı, hareket, kaydırma) görünümleri

tarafından işlenir

Fare olaylar kadar yakınlaştırma

Tuval üzerine ZUI hakkında hiçbir şey bulamadığım için (yukarıdaki koşullara uymasalar bile) herhangi bir öneri çok memnuniyetle karşılanacaktır.

Answer 1

Zoomooz'a bir göz attınız mı?

Zoomooz, web sayfası öğelerini yakınlaştırmak için kullanılan bir jQuery eklentisidir. Prezi'yi slayt gösterileri yapmak ve resimlere veya diğer detaylara yakınlaştırmak için kullanılabilir.

http://janne.aukia.com/zoomooz

herhangi DOM öğesine Büyütmek için kullanabilirsiniz

. Kanvas ile daha SVG ile daha iyi çalışır, çünkü yakınlaştırıldığında Tuval pixelated gösterecektir.

Answer 2

Piccolo2d'un gereksinimlerinizin çoğunu karşıladığı görülmüştür. Videonun o arayüz için nasıl kullanıldığını gösteren Geneaquilts videosuna bakın.

Answer 3

Bu başlangıç ​​olabilir:

ZUI53https://github.com/florianguenther/zui53 HTML5 ve CSS3 gibi yeni teknolojiler ile güçlü bir web tabanlı Zoomable Kullanıcı Arayüzü oluşturmak için bir JavaScript Kütüphanesi (ZUIs) 'dir.

Ayrıca OpenSeadragon da var, ancak Canvas kullanıp kullanmadığından emin değilim.

Answer 4

Ayrıca HTML ve CSS3 kullanan ancak Tuval kullanmıyor Taaspace.js da vardır. Taaspace, tüm farklı giriş yöntemlerini, örneğin dokunmatik ekranlı cihazlarla uyumlu hale getirmeyi dener. this example application.