الرسوم الشعاعية مع جافا

0:

• لماذا الصور الشعاعية ؟

أهم فوائدها أنها لا تتأثر بالتكبير، أي أنك تستطيع تكبيرها إلى أي حجم تريد من غير ظهور (مربعات) البكسلات (انكشاف البكسل)، بالإضافة إلى أنها تعتمد معايير مفتوحة، سهلة التعديل، حجمها صغير، قابلية البحث والتحديث ...

• ما هي التقنية المستخدمة ؟

حسناً، سنقوم بالاعتماد على مكتبة Batik من Apache. والتي سنقوم فيها بالتعامل مع الصور الشعاعيية من نوع svg والتي تعتمد بالكامل على XML مما يجعلها خياراً جذاباً جداً!

• ما الذي يمكنني عمله بهذه المكتبة ؟

بشكل أساسي، تعطيك المكتبة إمكانية توليد Generate، ومعالجة Manipulate، وتحويل ترميز Transcode الصور الشعاعية من نوع svg.

وتكمنك أيضاً من جلب الصور الشعاعية من مكونات swing الرسومية وعرضها ضمن برنامجك ... والكثير من الأمور الأخرى!

• ما المطلوب/غير المطلوب معرفته مسبقاً ؟

ليس هناك مشكلة إذا كنت لم تسمع بـ Apache أو لم تتعامل مع الصور الشعاعية مسبقاً. كما أنه من غير المطلوب أن يكون لديك معرفة مسبقة بالمكتبة Batik.

لكن المطلوب معرفة بأساسيات الجافا، وأساسيات البرمجة المرئية بـ SWING و XML.

• ماذا سأجد في هذه الدروس؟

سأحاول أن أغطي النقاط التالية إن شاء الله:

• مدخل إلى توليد الصور الشعاعية svg.
  
• استعراض صور svg من داخل برنامجك.
  
• فتح وحفظ الصور الشعاعية svg.
  
• تصدير الصور الشعاعية إلى صور نقطية.
  

لتحميل الكود من هنا SVGTest.zip

نبدأ على بركة الله:

_______________________________________________________________________________________________

1: مدخل إلى توليد الصور الشعاعية svg:

لتحميل الحزمة من هنا: http://xmlgraphics.apache.org/batik/download.cgi#Download+a+distribution

قم بفك الضغط، وقم بإضافة الملفات الموجودة في مجلد lib إلى الـ Class Path.

الآن كل شيء جاهز، فلنبدأ بالعمل:

بداية علينا إنشاء غرض من الصنف/الفئة DOMImplementation وهي الطريقة القياسية للتعامل مع أي مستند xml.

import org.w3c.dom.DOMImplementation;
import org.apache.batik.dom.svg.SVGDOMImplementation;

DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();

ثم نقوم بإنشاء مستند SVG ونجلب العنصر الجذر (الذي سيتم رسم كل المحتويات عليه) كما يلي:

import org.apache.batik.dom.svg.SVGDOMImplementation;
import org.w3c.dom.Document;
import org.w3c.dom.Element;

DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
Document doc = impl.createDocument(svgNS, "svg", null);

// تخزين العنصر الجذر في svgRoot
Element svgRoot = doc.getDocumentElement();

أصبح لدينا الغرض svgRoot هو العنصر الجذر الذي نستطيع استخدامه للرسم عليه، لكن بداية دعنا نضبط أبعاد الرسم (الـ resolution) إلى 500x400 بإضافة مايلي:

svgRoot.setAttributeNS(null, "width", "500");
svgRoot.setAttributeNS(null, "height", "400");

الآن يمكن أن نبدء بالرسم:

مثلاً: ننشئ مستطيل إحداثياته (50,100) وأبعاده 200x300 ولونه أخضر مع حواف سوداء بعرض 5 !!:

Element rectangle = doc.createElementNS(svgNS, "rect");
rectangle.setAttribute("x", "100");
rectangle.setAttribute("y", "50");
rectangle.setAttribute("width", "200");
rectangle.setAttribute("height", "300");
rectangle.setAttribute("fill", "green");
rectangle.setAttribute("stroke", "black");
rectangle.setAttribute("stroke-width", "5");

ثم نضيف ذلك المستطيل إلى العنصر الجذر:

svgRoot.appendChild(rectangle);

سهل أليس كذلك ؟!

بهذا نكون قد رسمنا الشكل التالي:

_______________________________________________________________________________________________

2: استعراض صور svg من داخل برنامجك:

يتم ذلك بواسطة لوحة رسم JSVGCanvas، وهي عبارة عن مكون مرئي يقوم بعرض مستندات/رسوم svg مع إمكانات إضافية كالتكبير والتصغير والتحريك والتدوير ...

كيف أستخدم هذه اللوحة ؟

ثلاث خطوات بسيطة:

- نقوم بإنشاء لوحة رسم JSVGCanvas.

- نحدد المستند الذي نرغب بعرضه باستخدام الطريقة setDocument.

- ثم ضيفها لوحة الرسم هذه إلى أي مكون نريد (إلى النافذة مثلاً)

قبل عرض مثال تطبيقي على ما مر معنا، لا بد أن نذكر كيف يتم التحكم بالمستند المعروض داخل لوحة الرسم JSVGCanvas:

مربع التكبير: Ctrl+LeftButton

التكبير الآني: Shift+RightButton

التحريك: Shift+LeftButton

التدوير: Ctrl+RightButton

الرجوع إلى العرض الافتراضي: Ctrl+Shift+RightButton

وهذا المثال الذي وعدتكم به :

package SVGTest;

import javax.swing.JFrame;
import org.apache.batik.dom.svg.SVGDOMImplementation;
import org.apache.batik.swing.JSVGCanvas;
import org.w3c.dom.DOMImplementation;
import org.w3c.dom.Document;
import org.w3c.dom.Element;

// صنف اختبار
public class Test1 extends JFrame {

    Document document;
    // إنشاء لوحة رسم
    JSVGCanvas svgCanvas = new JSVGCanvas();

    public Test1(String title) {
        setTitle(title);
        // إنشاء مستند
        document = drawDocument();

        // ضبط المستند الذي نرغب بعرضه
        svgCanvas.setDocument(document);

        // إضافة لوحة الرسم إلى النافذة
        getContentPane().add("Center", svgCanvas);

        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setSize(400, 400);
    }

    private Document drawDocument() {
        DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
        String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
// إنشاء مستند جديد
        Document doc = impl.createDocument(svgNS, "svg", null);
// إنشاء عنصر جذر
        Element svgRoot = doc.getDocumentElement();
// ضبط أبعاد عنصر الجذر
        svgRoot.setAttribute("width", "400");
        svgRoot.setAttribute("height", "400");
// إنشاء عنصر جديد (يمثل مستطيل) وضبط خصائصه
        Element rectangle = doc.createElementNS(svgNS, "rect");
        rectangle.setAttribute("x", "100");
        rectangle.setAttribute("y", "50");
        rectangle.setAttribute("width", "200");
        rectangle.setAttribute("height", "300");
        rectangle.setAttribute("fill", "green");
        rectangle.setAttribute("stroke", "black");
        rectangle.setAttribute("stroke-width", "5");
// إضافة المستطيل إلى عنصر الجذر
        svgRoot.appendChild(rectangle);

        return doc;
    }

    public static void main(String[] args) {
        new Test1("SVG Documents Viewer").setVisible(true);
    }
}
}

_______________________________________________________________________________________________

3: فتح وحفظ مستندات svg:

عندنا ملف svg ونريد أن نفرغ نسخة من محتوياته إلى مستند Document ...

يتم ذلك بمساعدة الصنف SAXSVGDocumentFactory حيث نقم بإنشاء غرض منه كما يلي:

            String parser = XMLResourceDescriptor.getXMLParserClassName();
            SAXSVGDocumentFactory f = new SAXSVGDocumentFactory(parser);

ثم نقوم بإنشاء المستند باستخدام الطريقة createDocument . كما في هذا المثال:

    public Document parseFile(File file) {
        Document document = null;
        try {
            String parser = XMLResourceDescriptor.getXMLParserClassName();
            SAXSVGDocumentFactory f = new SAXSVGDocumentFactory(parser);
            document = f.createDocument(file.toURI().toString());
        } catch (Exception e) {
            e.printStackTrace();
        }
        return document;
    }

بالرغم من أن هذا ليس جزءً من مكتبة Batik، لكني سأذكره في هذا السياق لأهميته:

لحفظ مستند svg (أو أي مستند xml) نقوم بما يلي:

ننشئ غرضاً من الصف TransformerFactory والذي نستخدمه لإنشاء غرض من الصف Transformer:

            TransformerFactory tf = TransformerFactory.newInstance();
            Transformer t = tf.newTransformer();

نقوم بتحديد المصدر Source والنتيجة Result، حيث المصدر من المستند والنتيجة إلى ملف.

وأخيراً يتم استدعاء الطريقة transform والتي تأخذ موسطين المصدر والنتيجة:

    public void doc2svg(Document doc, File f) {
        try {
            TransformerFactory tf = TransformerFactory.newInstance();
            Transformer t = tf.newTransformer();
            Source src = new DOMSource(doc);
            Result dest = new StreamResult(new FileOutputStream(f));
            t.transform(src, dest);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

_______________________________________________________________________________________________

4: تصدير الصور الشعاعية إلى صور نقطية:

ربما تكون هذه النقطة هي الأكثر أهمية بالنسبة لكثير من المبرمجين: تصدير الصور الشعاعية إلى صور عادية (bitmap).

وأهم ما في الأمر كما ذكرت في بداية الموضوع، أنك ستكون قادراً على إنتاج الصور بالأبعاد التي تريد من غير أي خسارة في الدقة!

يتم ذلك كما يلي:

- نقوم بإنشاء Transcoder (محول ترميز).

- نقوم بضبط التلميحات إذا أردنا (اختياري).

- ننشئ غرض من TranscoderInput يمثل المستند.

- ننشئ غرض من TranscoderOutput يمثل الملف الذي نرغب حفظ الصورة فيه.

- نستدعي الطريقة transcode لتنفيذ التحويل.

بضبط التلميحات نقوم بضبط إعدادات عملية التحويل، فمثلاً يمكن جعل عرض الصورة 2000 بكسل (بدلاً من العرض الافتراضي) عن طريق التلميح التالي:

            PNGTranscoder t = new PNGTranscoder();
            t.addTranscodingHint(PNGTranscoder.KEY_WIDTH, 2000);

دعنا نطبق ذلك من خلال مثال، حيث سنقوم بإنشاء طريقة تقوم بتصدير مستند إلى ملف png مع إمكانية إدخال معامل تكبير:

    public void doc2png(Document doc, File file, float sf) {
        try {
// إنشاء غرض من PNGTranscoder
            PNGTranscoder t = new PNGTranscoder();
// إضافة تلميح (400*معامل التكبير)
            t.addTranscodingHint(PNGTranscoder.KEY_WIDTH, 400 * sf);
// إنشاء المدخلات (من المستند)
            TranscoderInput input = new TranscoderInput(doc);

            OutputStream ostream = new FileOutputStream(file);
// إنشاء المخرجات (إلى ملف)
            TranscoderOutput output = new TranscoderOutput(ostream);
// تنفيذ التحويل
            t.transcode(input, output);
// التأكد من إنهاء كتابة الملف على القرص، وإغلاقه.
            ostream.flush();
            ostream.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

_______________________________________________________________________________________________

5: ماذا بعد؟

هذا مجرد استعراض بسيط لإظهار بعض إمكانات الصور الشعاعية svg مع مكتبة batik، لكن هذا ليس سوى البداية ... والإمكانات لا حدود لها:

• يمكن لك عرض أي مستند svg (محلي أو على الشبكة) بشكل مباشر وفوري في JSVGCanvas باستخدام الطريقة setURI.
  
• يمكنك تخصيص طرق التحكم بلوحة الرسم JSVGCanvas عن طريق interactors.
  
• توجد بضع برمجيات جاهزة مفتوحة المصدر من batik تشكل أمثلة غنية وتستخدم الكثير من إمكاناتها.
  
• تمكنك مكتبة batik من التحويل بين رسوم JavaGraphices و رسوم svg !
  
• تدعم رسومات svg الحركات animations !
  
• تدعم رسومات svg الأحداث events !
  

والكثير الكثير غيرها ...

لمزيد من المعلومات حول وسوم svg:

http://www.w3schools.com/svg/default.asp

الموقع الرسمي للمكتبة:

http://xmlgraphics.apache.org/batik/

التوثيق الرسمي للمكتبة:

http://xmlgraphics.apache.org/batik/javadoc/