Mozilla 데모 스튜디오

  • 데모 제출

Vandalism

Vandalize the web, make it yours.

이용 기술 자바스크립트, HTML5, 캔버스, 드래그 앤 드롭,

  • 조회수 136회
  • 댓글수 0건

현재 데모에 대한 개발자 댓글

Vandalism is an application that lets you scribble on web pages. You can draw figures like rectangles and circles, draw freehand and write text. This is useful for web development teams, to make annotations on web sites. With the help of an addon like Abduction! [0] you can save the page with its annotations as an image.

[0] https://addons.mozilla.org/en-US/firefox/addon/abduction/


How does it work?
=================

Launch the demo, you'll see an image, drag it to your bookmarks tab and drop it there. Now go to another web page, any, and click the brand new bookmark. You should be able to make annotations on the web page. Click the button once again and the panels will hide so you can take a snapshot of your artistic expression.


Design
======

The app right now is not very pretty. I'm looking for a designer who may want to contribute to the project. If you want to help please contact me.


On the shoulders of giants
=========================

This app is based on Rafael Robayna's "Canvas Painter" [1] and on switchonthecode.com's tutorial "Draggable Elements" [2]. Nevertheless it has a lot of work on top of it.

[1] http://caimansys.com/painter/

[2] http://www.switchonthecode.com/tutorials/javascript-draggable-elements


Features added
--------------

* Drag and drop for the toolbars.
* Text writing.
* Undo and redo.


Features dropped
----------------

* IE support.
* Canvas animator.
* "New" button.


Changes and bugfixes
--------------------

* Many UI features that were applied through JS were reimplemented on CSS.
* Some buttons, like brushes, get selected when clicked, other, such as undo, don't.
* All the code was JSLint'ed.
* The mousedown event got captured when mousemove began, not when mouse was clicked.
* Widgets no longer needs to be positioned absolutely and referenced absolutely.


TODO list
---------

* If you just click and release (no drag) nothing gets drawn but an entry in history is created.
* A color picker would be nice.
* Prettier design. Anyone wants to help? =)
* The logic is highly coupled to the GUI. When you add a button to the toolbar you can break everything.


I hope you find it useful. Fork it: https://github.com/tooxie/js-vandalism

Happy hacking!

아직 댓글이 없습니다.

등록하거나 또는 로그인 해서 추가하기.

소스 코드 보기

소스 다운로드 66.7 KB · ZIP 파일

Browse the Source

현재 데모는 GPL 라이센스 하에 공개되고 있습니다.

더 많은 정보 보기 tuxie