Skip to content

Instantly share code, notes, and snippets.

@roundrobin
Created July 29, 2012 10:02
Show Gist options
  • Save roundrobin/3197200 to your computer and use it in GitHub Desktop.
Save roundrobin/3197200 to your computer and use it in GitHub Desktop.
just another inlet to tributary
var pathWay = [[403,167,'M'],[192,171,'Q']];
var drawing = false;
var path = g.append('path')
.attr('stroke','blue')
.attr('stroke-width',5)
.attr('fill',"#000000")
.attr('id','path')
.attr('fill-opacity','0.5')
.attr('class','drawit')
.attr('transform','scale(1)')
.attr('id','pathWay')
drawCharacter(pathWay,path)
g.on('click',function(){
var point = {x:d3.event.pageX ,y:d3.event.pageY-75,type: 'Q'}
if(pathWay.length == 0)
point.type = 'M';
addToArray(point);
drawCharacter(pathWay,path);
});
function addToArray(point){
var text = d3.select('#pathWay')
var textValue = getLine(0);
var search = /var pathWay = \[(.*)\]/;
var result = search.exec(textValue);
if(textValue == 'var pathWay = [];'){
add = "["+point.x+","+point.y+",'"+point.type+"']";
}else{
add = ",["+point.x+","+point.y+",'"+point.type+"']";
}
var modify = result[1]+add;
var finalString = 'var pathWay = ['+(modify)+'];';
var test = text.text(finalString);
test = test.text();
setLine(0,test);
}
function drawCharacter(pathArray,path){
var curve = '';
for( i in pathArray){
var point = pathArray[i];
createCircle(point,'red')
if(i > 1 && point[2] == 'M')
curve += 'Z '
if(point[2] == 'M')
curve += point[2]+''+point[0]+','+point[1];
if(point[2] == 'Q')
curve += ' '+point[2]+''+point[0]+','+point[1]+' '+point[0]+','+point[1];
if(i == (pathArray.length-1))
curve += 'Z'
}
console.log(curve)
path.attr('d',curve)
}
function createCircle(pointD,color){
if(!color){
color = "#000000";
}
g.append('circle')
.attr('r',5)
.attr('stroke',color)
.attr('stroke-width',2)
.attr('fill',color)
.attr('cx',pointD[0])
.attr('cy',pointD[1])
.attr('class','circleHandle')
.on('mouseover',function(){
if(drawing == true)
d3.select(this).attr('fill','yellow')
})
.on('mouseout',function(){
if(drawing == true)
d3.select(this).attr('fill','red')
})
.on('click',function(){
console.log('d','Hello',drawing)
if(drawing == true){
var pathSoFar = path.attr('d')
path.attr('d',pathSoFar+'Z')
drawing = false;
drawing = getLine(2);
drawing = 'var drawing = false;'
setLine(2,drawing);
}else{
console.log(path.attr('d'))
}
})
}
var defs = d3.select('svg').append('defs')
addGradient("#363636", "#5B6B65", 46, 'g3201')
addGradient("#5B6B65", "#363636", 46, 'g3202')
addGradient("#FFF368", "#418041", 46, 'g3203')
addGradient("#0085FF", "#1073A2", 46, 'g3204')
function addGradient(color1,color2,stopPX,id){
var gradient = defs.append('linearGradient')
.attr('id',id)
.attr('gradientUnits','userSpaceOnUse')
.attr('x1','0%')
.attr('x2','0%')
.attr('y1','0%')
.attr('y2',stopPX)
gradient.append('stop').attr('stop-color',color1).attr('offset','0')
gradient.append('stop').attr('stop-color',color2).attr('offset','1')
}
function getLine(line){
return tribView.code_editor.getLine(line);
}
function setLine(line,content){
return tribView.code_editor.setLine(line,content);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment