Skip to content

Instantly share code, notes, and snippets.

@cool-Blue

cool-Blue/index.html

Created September 23, 2015 17:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cool-Blue/0c2c3cbcf74edd0f0a04 to your computer and use it in GitHub Desktop.
Save cool-Blue/0c2c3cbcf74edd0f0a04 to your computer and use it in GitHub Desktop.
Download ZIP
pixi.js dragable Graphics object
Raw
index.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:webGL="CB:webGL/dummy/nodes">
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas {
display: block;
}
</style>
</head>
<body>
<div id="log" style="white-space: pre;"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
$(function(){
var canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
document.body.appendChild(canvas);
var renderer = PIXI.autoDetectRenderer(canvas.width, canvas.height, {view: canvas, resolution: 1});
var stage = new PIXI.Container();
function update () {
renderer.render(stage);
window.requestAnimationFrame(update);
}
var p0 = [100,100],
p1 = [100,300],
p2 = [300,300],
r = 200;
var graphics = new PIXI.Graphics();
graphics.beginFill(0x2B303B);
graphics.drawRect(0,0,canvas.width, canvas.height);
graphics.endFill();
stage.addChild(graphics);
graphics.lineStyle(5, 0xffffff);
// moveTo creates a new polygon, wraps it in a graphicsObject,
// connects it to currentPath then pushes it into the graphicsData array.
// As of v 3.0.7, a new polygons will always have closed set to true.
graphics.moveTo(p0[0],p0[1]);
graphics.arcTo(
p1[0], p1[1],
p2[0], p2[1],
r
);
graphics.currentPath.shape.closed = false;
// lineStyle will initialise the currentPath including the end point of the previous
// path if there was one. It also sets the Graphics object line style
graphics.lineStyle(3, 0xff0000, 0.3);
// the first point created by lineStyle is removed and the graphicsData object it added
// is popped off. A new graphicsData object is created and initialised from the Graphics
// object line style.
graphics.moveTo(p0[0],p0[1]);
graphics.lineTo(p1[0],p1[1]);
graphics.currentPath.shape.closed = false;
graphics.currentPath.shape.interactive = true;
graphics.moveTo(p1[0],p1[1]);
graphics.lineTo(p2[0],p2[1]);
graphics.currentPath.shape.closed = false;
graphics.currentPath.shape.interactive = true;
[p0, p1, p2].forEach(function(p, i){
var label = new PIXI.Text(["x"+i,"y"+i]);
label;
label.anchor = [{x: 1, y:1}, {x: 1, y:1}, {x: 0, y:1}][i];
label.x = p[0] - [6, 6, 0][i]; label.y = p[1] - 6;
stage.addChild(label);
graphics.drawCircle(p[0], p[1], 3).drag();
//graphics.drawRect(p[0], p[1], 3, 3);
//graphics.drawRoundedRect(p[0], p[1], 3, 3, 1);
//graphics.drawEllipse(p[0], p[1], 6, 3);
});
update();
});
(function(PIXI) {
PIXI.Graphics.prototype.drag = function(remove){
var g = new PIXI.Graphics(), gd,
s, i,
that = this;
g.graphicsData.push((gd = ( gd = that.graphicsData)[gd.length-1]));
gd.lineAlpha = 1; gd.lineWidth = 1; gd.lineColor = 0;
s = new PIXI.Sprite(g.generateTexture(new PIXI.CanvasRenderer()));
s.interactive = true;
that.addChild(s);
drag.call(s, remove);
if(gd.shape.points){
}
s.position = {get x() {return gd.shape.x}, get y() {return gd.shape.y}};
s.anchor.set(0.5);
Object.defineProperties(s._drag, {
x: {
set: function(_) {
gd.shape.x = _;
that.clearDirty = that.dirty = true;
}
},
y: {
set: function(_) {
gd.shape.y = _
that.clearDirty = that.dirty = true;
}
}
});
return that;
};
function drag(remove) {
var offset,
container = this.parent,
that = this;
[
{e: "mouseover", l: onMouseOver},
{e: "mouseout", l: onMouseOut},
// events for drag start
{e: 'mousedown', l: onDragStart},
{e: 'touchstart', l: onDragStart},
// events for drag end
{e: 'mouseup', l: onDragEnd},
{e: 'mouseupoutside', l: onDragEnd},
{e: 'touchend', l: onDragEnd},
{e: 'touchendoutside', l: onDragEnd},
// events for drag move
{e: 'mousemove', l: onDragMove},
{e: 'touchmove', l: onDragMove}
].forEach(function(event) {
that.on(event.e, remove ? null : event.l, that)
});
if(remove) delete this._drag; else this._drag = {};
function onMouseOver(event) {
console.log(myName(arguments))
this._drag.fixed |= 4;
}
function onMouseOut(event) {
console.log(myName(arguments))
this._drag.fixed &= ~4;
}
function onDragStart(event) {
//var r = this.__data__.radius;
offset = event.data.getLocalPosition(this);
//offset.x *= r / rMax;
//offset.y *= r / rMax;
console.log(myName(arguments))
// store a reference to the _drag
// the reason for this is because of multitouch
// we want to track the movement of this particular touch
this._drag.eventData = event.data;
this._drag.fixed |= 2;
}
function onDragEnd() {
console.log(myName(arguments))
this._drag.fixed &= ~6;
// set the interaction data to null
this._drag.eventData = null;
}
function onDragMove(event) {
var d;
if((d = this._drag).fixed & 2) {
console.log(myName(arguments))
var newPosition = this._drag.eventData.getLocalPosition(container);
d.x = this.position.x = newPosition.x - offset.x;
d.y = this.position.y = newPosition.y - offset.y;
}
}
function myName(args) {
return /function\s+(\w*)\(/.exec(args.callee)[1];
}
return that;
};
})(PIXI);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment