ดาวน์โหลด DrawerJs - ดาวน์โหลดซอร์สโค้ด DrawerJs

DrawerJs

ทรัพยากรอื่นๆ

1.0.0

ดาวน์โหลด

DACKERJS

DrawerJS เป็นวิดเจ็ต HTML5 ที่อนุญาตให้วาดและเขียนบนองค์ประกอบ HTML5 Canvas อุปกรณ์พกพาได้รับการสนับสนุนอย่างเต็มที่

มันเป็นตัวแก้ไข Canvas Wysiwyg HTML ที่ปรับแต่งได้สำหรับการวาดด้วยมือเปล่าและสร้างภาพร่างที่มีรูปร่างเรียบง่าย

DACKERJS คืออะไร? ฉันจะใช้มันได้อย่างไร?

ที่นี่คุณจะพบข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัติและคำถามที่พบบ่อยสั้น ๆ : drawerjs

และที่นี่คุณจะพบตัวอย่างบางส่วนและคุณสามารถทดสอบมันสด: drawerjs บน gitHub

ที่นี่คุณจะพบเอกสารโดยละเอียดเกี่ยวกับการใช้งานและการกำหนดค่า: DLACKERJS-DOCS

บันทึกย่อ

นี่คือบันทึกการเปิดตัวของการปรับใช้ตั้งแต่ปี 2558: บันทึกย่อการเปิดตัวของ DLACKERJS

มีส่วนช่วย?

หากคุณต้องการมีส่วนร่วมหรือเพียงแค่ช่วย PR โปรดติดต่อฉัน!

คุณรู้จักไลบรารี JavaScript อื่น ๆ ของเราหรือไม่?

ตรวจสอบอิมเมจอัพโหลดอิมเมจของเรา!

เอกสาร:

เวอร์ชันการกระจาย

ตัวเลือกการกำหนดค่า

การตั้งค่าสภาพแวดล้อมการพัฒนา

ไฟล์ซอร์สโค้ดและภาพรวมระบบ

ภาพรวมสถาปัตยกรรมซอร์สโค้ด

ปลั๊กอินเวอร์ชัน

ปลั๊กอินนี้กระจายในสองเวอร์ชัน:

ปลั๊กอินตัวแก้ไข Redactor

สามารถฝังอยู่ในหน้าดังนี้:

 <link rel="stylesheet" href="dist/drawerJs.css"/>

<script src="dist/drawerJs.redactor.js"></script>

<!-- or minified version: -->

<script src="dist/drawerJs.redactor.min.js"></script>

สำหรับข้อมูลเกี่ยวกับวิธีการสร้างทุกอย่างในโฟลเดอร์ dist โปรดดูวิธีการพัฒนาวิธีการ

จากนั้นสามารถให้ชื่อ drawer กับการกำหนดค่าของ Redactor ในส่วน plugins :

 $('.redactor').redactor({
    buttons: [
        'bold',
        'html',
        'image'
    ],
    plugins: [
        'video',
        'drawer', // << here we specify that redactor should load this plugin
        'opensave',
        'contexttoolbar'
    ],
    drawer: {
        // drawer config section here
        activeColor: '#19A6FD' // default drawing color
    }
});

สำหรับตัวอย่างการทำงานโปรดดู demo สาธิต

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับส่วนการกำหนดค่าลิ้นชักโปรดดูการกำหนดค่า

เวอร์ชันแบบสแตนด์อโลน

สามารถฝังอยู่ในหน้าดังนี้:

 <link rel="stylesheet" href="dist/drawerJs.css"/>

<script src="dist/drawerJs.standalone.js"></script>

<!-- or minified version: -->

<script src="dist/drawerJs.standalone.min.js"></script>

สำหรับข้อมูลเกี่ยวกับวิธีการสร้างทุกอย่างในโฟลเดอร์ dist โปรดดูวิธีการพัฒนาวิธีการ

จากนั้นลิ้นชักสามารถผนวกเข้ากับคอนเทนเนอร์ HTML ใด ๆ เช่นนี้:

 var canvas = new DrawerJs.Drawer(null, {
    // drawer config section here
    activeColor: '#19A6FD' // default drawing color
}, 600, 600); // height and width of drawer will be 600x600

$('#some_id').append(canvas.getHtml());
canvas.onInsert();

โดยที่ #some_id เป็นรหัสองค์ประกอบใด ๆ

สำหรับตัวอย่างการทำงานโปรดดู examples/standalone

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับส่วนการกำหนดค่าลิ้นชักโปรดดูการกำหนดค่า