Html5多边形相交判定,HTML5/SVG的多边形捕捉交互动效

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var star = document.querySelector("#star");

var markerDef = document.querySelector("defs .marker");

var handleDef = document.querySelector("defs .handle");

var markerLayer = document.querySelector("#marker-layer");

var handleLayer = document.querySelector("#handle-layer");

var points = [];

var numPoints = star.points.numberOfItems;

for (var i = 0; i < numPoints; i++) {

var point = star.points.getItem(i);

points[i] = {

x: point.x,

y: point.y

};

createHandle(point);

}

TweenLite.set("#svg", {

autoAlpha: 1

});

function createHandle(point) {

var marker = createClone(markerDef, markerLayer, point);

var handle = createClone(handleDef, handleLayer, point);

var draggable = new Draggable(handle, {

bounds: window,

throwProps: true,

onDrag: moveAction,

onThrowUpdate: moveAction,

throwResistance: 5000,

liveSnap: {

point: points,

radius: 10

},

snap: {

point: points,

radius: 50

}

});

function moveAction() {

point.x = this.x;

point.y = this.y;

}

}

function createClone(node, parent, point) {

var element = node.cloneNode(true);

parent.appendChild(element);

TweenLite.set(element, {

x: point.x,

y: point.y

});

return element;

}