Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "Javascript/jQuery plug-in SVG SketchPad how to use", the content is detailed, the steps are clear, the details are handled properly, I hope this "Javascript/jQuery plug-in SVG SketchPad how to use" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Use the code

To use the code, simply include the editor.js file and initialize it as a regular jQuery plug-in.

The following sample code creates (# content) a simple with the desired size area. Then create a jQuery object in the jQuerydocument.ready function and attach the change event handler. In this handler, it uses the object toText function of Scribble to treat the drawing as an svg text string and sets the value of the preview # res element to that svg.

In addition, it gets the PNG value of the drawing and sets the preview image to that value. Because image loading is not an immediate operation in the browser, the event handler provided as a function parameter is called when the image is ready.

$(document) .ready (function () {$('# content'). Scribble (). Change (function () {$('# res'). Html ($(this) .Scribble ('toText',' svg')); $(this) .Scribble ('toText',' png', function (img) {$('# img'). Attr ('src', img)) })

Here are three interesting ways:

Onchange event-generated each time the image is changed

ToText (type, onLoad) method-A method that returns the current SVG value as a string of different formats. Possible formats:

○ svg-returns the value as a SVG string

○ base64-value encoded by SVG base64

○ mix-base64 encoding is used if the SVG contains unicode characters (emojii), otherwise a non-coded value is returned

○ png, jpeg, or any other image mime type that does not have a "imamge/" section. When called, the return value is the base64-encoded value. Image will be returned in the OnLoad method (required here)

FromText (val)-loads the editor's value using the supplied SVG string generated by the () function above toText. If the container element is to be hidden as a child element, the value of this textarea is used as the initial value of the editor. If this text area is not found, an empty hidden text area is created. The text area will be updated with SVG content when any changes occur. This is the technique I use to pass values between browsers and back-end ASP.NET WebForms applications.

Supported tools

Lines-allow lines to be created

Rectangle-allows you to create rectangle

Arrow-allows you to create arrowheads

Pencil-freeform drawing. The initial implementation is to remember all mouse movement points. However, this can lead to curved lines and many points. So if you don't press shift, the final version will draw a straight line. You can press the shift key or pause for half a second to drop the anchor or hold down shift to follow the mosemove event as you paint.

Text-allows text / emoji input.

Image-an image is required to be inserted. Images can also be dragged / dropped or pasted to the top of the drawing area

Move-switches from object creation to move / resize mode.

Color-change the color of the selected / created object

Width-changes the stroke width of the selected / created object

Rotation-for simplicity, I am only allowed to rotate 90 degrees once

Point of interest Base64 coding

At some point in troubleshooting the final product, I encountered a problem where emojii could not reload correctly. It took me a while to realize that my database column is varchar (max) and does not store unicode. Because other projects use the same database, I decided to encode SVG as base64 instead of changing the column type. Unfortunately, there is a problem with the btoa function in the browser, so it will take some time to find a solution.

SVG loading / compatibility

SVG is a complete language. I never intended to be able to support all the functionality defined in the SVG specification, just to be able to load the documents I created earlier. Don't just try it with random SVG documents-it probably won't work.

Read here, this "Javascript/jQuery plug-in SVG SketchPad how to use" article has been introduced, want to master the knowledge of this article also need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.