Create a Canvas vector graphics Renderer (3) -- move the mouse and scroll wheel

Document directory

• 3. Next let's take a look at the Pan dragging.

The last time the mouse was scaled and translated with a button. The user experience was poor. This article is followed by dragging and zooming the last content.

First go to the demo, zoom the scroll wheel, drag and drop the pan.

 

Add point Add circle Zoom in Zoom out

1. What is the control class? Control

The control class is a type of operation that is added to the layer class to control the layer. For example, the mouse wheel scaling and mouse dragging mentioned today belong to two control classes.

1. First, check scroll wheel scaling.

// CLASS: Scaling control CLASS function Scale (layer) {this. layer = layer; this. div = layer. div; this. active ();} Scale. prototype. wheelChange = function (e) {var layer = this. layer; var delta = (e. maid/120) * 30; var deltalX = layer. size. w/2-(e. offsetX | e. layerX); var deltalY = (e. offsetY | e. layerY)-layer. size. h/2; var px = {x: (e. offsetX | e. layerX), y :( e. offsetY | e. layerY)}; var zoomPoint = this. layer. getPositionFromPx (px); var zoom = this. layer. zoom + delta; var newRes = this. layer. getResFromZoom (zoom); var center = new CanvasSketch. position (zoomPoint. x + deltalX * newRes, zoomPoint. y + deltalY * newRes); this. layer. moveTo (zoom, center); CanvasSketch. stopEventBubble (e);} Scale. prototype. DOMScroll = function (e) {CanvasSketch. stopEventBubble (e);} Scale. prototype. events = [["mousewheel", Scale. prototype. wheelChange], ["DOMMouseScroll", Scale. prototype. DOMScroll]; Scale. prototype. active = function () {for (var I = 0, len = this. events. length; I <len; I ++) {var type = this. events [I] [0]; var listener = this. events [I] [1]; listener = CanvasSketch. bindAsEventListener (listener, this); this. div. addEventListener (type, listener, true );}}

1. Use the Scale Layer as the constructor parameter.

2. There is an Events constant attribute, which is a two-dimensional array that stores the Events and callback functions monitored by the controls class.

3. avtive method, used to activate a listener.

4. the most important thing is the callback function: wheelChange. The zoom value of the scroll wheel changes to 30% every time. The zoomPoint is calculated based on the current mouse position ), and calculate the center point of our scaling through the offset of the mouse and the new res. Finally, we also want to prevent event bubbling and browser default events. We certainly do not want to scroll down the browser page when scaling!

2. How to Prevent event bubbling and browser default events

// Prevent the event from bubbling CanvasSketch. stopEventBubble = function (e) {if (e. preventDefault) {e. preventDefault ();} else {e. returnValue = false;} if (e & e. stopPropagation) e. stopPropagation (); else window. event. cancelBubble = true ;}

The upper part of this function is to prevent the default events of the browser, such as scroll wheel page, left click and move the mouse to display as the cursor status, and so on ,,.

3. Next let's take a look at the Pan dragging.

// CLASS: Controls translation. Function Pan (layer) {this. layer = layer; this. div = layer. div; this. active (); this. dragging = false;} Pan. prototype. startPan = function (e) {this. dragging = true; // the position where the click is saved at the beginning. This. lastX = (e. offsetX | e. layerX); this. lastY = (e. offsetY | e. layerY); // set the mouse style. This. layer. div. style. cursor = "move"; CanvasSketch. stopEventBubble (e);} Pan. prototype. pan = function (e) {if (this. dragging) {var layer = this. layer; // calculate the changed pixel value var dx = (e. offsetX | e. layerX)-this. lastX; var dy = (e. offsetY | e. layerY)-this. lastY; this. lastX = (e. offsetX | e. layerX); this. lastY = (e. offsetY | e. layerY); layer. center. x-= dx * layer. res; layer. center. y + = dy * layer. res; layer. moveTo (layer. zoom, layer. center);} CanvasSketch. stopEventBubble (e);} Pan. prototype. endPan = function (e) {this. layer. div. style. cursor = "default"; this. dragging = false; CanvasSketch. stopEventBubble (e);} Pan. prototype. events = [["mousedown", Pan. prototype. startPan], ["mousemove", Pan. prototype. pan], ["mouseup", Pan. prototype. endPan]; Pan. prototype. active = function () {for (var I = 0, len = this. events. length; I <len; I ++) {var type = this. events [I] [0]; var listener = this. events [I] [1]; listener = CanvasSketch. bindAsEventListener (listener, this); this. div. addEventListener (type, listener, true );}}

1. Three mouse events are monitored: Mouse clicking, mouse moving, and mouse popping. The three events are handled as follows:

A. When the mouse is pressed, we turn on the drag (dragging is set to true) and record the initial mouse position.

B. during mouse translation, we first determine whether to move the variable out of the drag state; then compare it with the initial position to calculate the offset variable, and convert it to the length of the world coordinate system to find a new center call layer. moveTo; finally, set the current position to the initial position.

C. There will be less processing when the mouse pops up. Is to close the drag status (dragging is set to false ).

Now, let's write this article first. You can download the source code to see what the structure is like.

Next notice: 1. Add the vector element of the line.

2. Add a surface vector element.

For all the source code + demo in this essay, please click to download.