mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-07-11 15:14:27 +02:00
in the beginning
This commit is contained in:
commit
a817cec5f5
23 changed files with 4243 additions and 0 deletions
384
arbor_src/graphics/graphics.js
Normal file
384
arbor_src/graphics/graphics.js
Normal file
|
@ -0,0 +1,384 @@
|
|||
//
|
||||
// graphics.js
|
||||
//
|
||||
// Created by Christian Swinehart on 2010-12-07.
|
||||
// Copyright (c) 2011 Samizdat Drafting Co. All rights reserved.
|
||||
//
|
||||
|
||||
var Graphics = function(canvas){
|
||||
var dom = $(canvas)
|
||||
var ctx = $(dom).get(0).getContext('2d')
|
||||
|
||||
var _bounds = null
|
||||
|
||||
var _colorMode = "rgb" // vs hsb
|
||||
var _coordMode = "origin" // vs "center"
|
||||
|
||||
var _drawLibrary = {}
|
||||
var _drawStyle = {background:null,
|
||||
fill:null,
|
||||
stroke:null,
|
||||
width:0}
|
||||
|
||||
var _fontLibrary = {}
|
||||
var _fontStyle = {font:"sans-serif",
|
||||
size:12,
|
||||
align:"left",
|
||||
color:Colors.decode("black"),
|
||||
alpha:1,
|
||||
baseline:"ideographic"}
|
||||
|
||||
var _lineBuffer = [] // calls to .lines sit here until flushed by .drawlines
|
||||
|
||||
///MACRO:primitives-start
|
||||
var primitives = Primitives(ctx, _drawStyle, _fontStyle)
|
||||
var _Oval = primitives._Oval
|
||||
var _Rect = primitives._Rect
|
||||
var _Color = primitives._Color
|
||||
var _Path = primitives._Path
|
||||
///MACRO:primitives-end
|
||||
|
||||
|
||||
// drawStyle({background:"color" or {r,g,b,a},
|
||||
// fill:"color" or {r,g,b,a},
|
||||
// stroke:"color" or {r,g,b,a},
|
||||
// alpha:<number>,
|
||||
// weight:<number>})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var that = {
|
||||
init:function(){
|
||||
if (!ctx) return null
|
||||
return that
|
||||
},
|
||||
|
||||
// canvas-wide settings
|
||||
size:function(width,height){
|
||||
if (!isNaN(width) && !isNaN(height)){
|
||||
dom.attr({width:width,height:height})
|
||||
|
||||
// if (_drawStyle.fill!==null) that.fill(_drawStyle.fill)
|
||||
// if (_drawStyle.stroke!==null) that.stroke(_drawStyle.stroke)
|
||||
// that.textStyle(_fontStyle)
|
||||
|
||||
// trace(_drawStyle,_fontStyle)
|
||||
}
|
||||
return {width:dom.attr('width'), height:dom.attr('height')}
|
||||
},
|
||||
|
||||
clear:function(x,y,w,h){
|
||||
if (arguments.length<4){
|
||||
x=0; y=0
|
||||
w=dom.attr('width')
|
||||
h=dom.attr('height')
|
||||
}
|
||||
|
||||
ctx.clearRect(x,y,w,h)
|
||||
if (_drawStyle.background!==null){
|
||||
ctx.save()
|
||||
ctx.fillStyle = Colors.encode(_drawStyle.background)
|
||||
ctx.fillRect(x,y,w,h)
|
||||
ctx.restore()
|
||||
}
|
||||
},
|
||||
|
||||
background:function(a,b,c,d){
|
||||
if (a==null){
|
||||
_drawStyle.background = null
|
||||
return null
|
||||
}
|
||||
|
||||
var fillColor = Colors.decode(a,b,c,d)
|
||||
if (fillColor){
|
||||
_drawStyle.background = fillColor
|
||||
that.clear()
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// drawing to screen
|
||||
noFill:function(){
|
||||
_drawStyle.fill = null
|
||||
},
|
||||
fill:function(a,b,c,d){
|
||||
if (arguments.length==0){
|
||||
return _drawStyle.fill
|
||||
}else if (arguments.length>0){
|
||||
var fillColor = Colors.decode(a,b,c,d)
|
||||
_drawStyle.fill = fillColor
|
||||
ctx.fillStyle = Colors.encode(fillColor)
|
||||
}
|
||||
},
|
||||
|
||||
noStroke:function(){
|
||||
_drawStyle.stroke = null
|
||||
ctx.strokeStyle = null
|
||||
},
|
||||
stroke:function(a,b,c,d){
|
||||
if (arguments.length==0 && _drawStyle.stroke!==null){
|
||||
return _drawStyle.stroke
|
||||
}else if (arguments.length>0){
|
||||
var strokeColor = Colors.decode(a,b,c,d)
|
||||
_drawStyle.stroke = strokeColor
|
||||
ctx.strokeStyle = Colors.encode(strokeColor)
|
||||
}
|
||||
},
|
||||
strokeWidth:function(ptsize){
|
||||
if (ptsize===undefined) return ctx.lineWidth
|
||||
ctx.lineWidth = _drawStyle.width = ptsize
|
||||
},
|
||||
|
||||
|
||||
|
||||
Color:function(clr){
|
||||
return new _Color(clr)
|
||||
},
|
||||
|
||||
|
||||
// Font:function(fontName, pointSize){
|
||||
// return new _Font(fontName, pointSize)
|
||||
// },
|
||||
// font:function(fontName, pointSize){
|
||||
// if (fontName!==undefined) _fontStyle.font = fontName
|
||||
// if (pointSize!==undefined) _fontStyle.size = pointSize
|
||||
// ctx.font = nano("{size}px {font}", _fontStyle)
|
||||
// },
|
||||
|
||||
|
||||
drawStyle:function(style){
|
||||
// without arguments, show the current state
|
||||
if (arguments.length==0) return objcopy(_drawStyle)
|
||||
|
||||
// if this is a ("stylename", {style}) invocation, don't change the current
|
||||
// state but add it to the library
|
||||
if (arguments.length==2){
|
||||
var styleName = arguments[0]
|
||||
var styleDef = arguments[1]
|
||||
if (typeof styleName=='string' && typeof styleDef=='object'){
|
||||
var newStyle = {}
|
||||
if (styleDef.color!==undefined){
|
||||
var textColor = Colors.decode(styleDef.color)
|
||||
if (textColor) newStyle.color = textColor
|
||||
}
|
||||
$.each('background fill stroke width'.split(' '), function(i, param){
|
||||
if (styleDef[param]!==undefined) newStyle[param] = styleDef[param]
|
||||
})
|
||||
if (!$.isEmptyObject(newStyle)) _drawLibrary[styleName] = newStyle
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// if a ("stylename") invocation, load up the selected style
|
||||
if (arguments.length==1 && _drawLibrary[arguments[0]]!==undefined){
|
||||
style = _drawLibrary[arguments[0]]
|
||||
}
|
||||
|
||||
// for each of the properties specified, update the canvas state
|
||||
if (style.width!==undefined) _drawStyle.width = style.width
|
||||
ctx.lineWidth = _drawStyle.width
|
||||
|
||||
$.each('background fill stroke',function(i, color){
|
||||
if (style[color]!==undefined){
|
||||
if (style[color]===null) _drawStyle[color] = null
|
||||
else{
|
||||
var useColor = Colors.decode(style[color])
|
||||
if (useColor) _drawStyle[color] = useColor
|
||||
}
|
||||
}
|
||||
})
|
||||
ctx.fillStyle = _drawStyle.fill
|
||||
ctx.strokeStyle = _drawStyle.stroke
|
||||
},
|
||||
|
||||
textStyle:function(style){
|
||||
// without arguments, show the current state
|
||||
if (arguments.length==0) return objcopy(_fontStyle)
|
||||
|
||||
// if this is a ("name", {style}) invocation, don't change the current
|
||||
// state but add it to the library
|
||||
if (arguments.length==2){
|
||||
var styleName = arguments[0]
|
||||
var styleDef = arguments[1]
|
||||
if (typeof styleName=='string' && typeof styleDef=='object'){
|
||||
var newStyle = {}
|
||||
if (styleDef.color!==undefined){
|
||||
var textColor = Colors.decode(styleDef.color)
|
||||
if (textColor) newStyle.color = textColor
|
||||
}
|
||||
$.each('font size align baseline alpha'.split(' '), function(i, param){
|
||||
if (styleDef[param]!==undefined) newStyle[param] = styleDef[param]
|
||||
})
|
||||
if (!$.isEmptyObject(newStyle)) _fontLibrary[styleName] = newStyle
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (arguments.length==1 && _fontLibrary[arguments[0]]!==undefined){
|
||||
style = _fontLibrary[arguments[0]]
|
||||
}
|
||||
|
||||
if (style.font!==undefined) _fontStyle.font = style.font
|
||||
if (style.size!==undefined) _fontStyle.size = style.size
|
||||
ctx.font = nano("{size}px {font}", _fontStyle)
|
||||
|
||||
if (style.align!==undefined){
|
||||
ctx.textAlign = _fontStyle.align = style.align
|
||||
}
|
||||
if (style.baseline!==undefined){
|
||||
ctx.textBaseline = _fontStyle.baseline = style.baseline
|
||||
}
|
||||
|
||||
if (style.alpha!==undefined) _fontStyle.alpha = style.alpha
|
||||
if (style.color!==undefined){
|
||||
var textColor = Colors.decode(style.color)
|
||||
if (textColor) _fontStyle.color = textColor
|
||||
}
|
||||
if (_fontStyle.color){
|
||||
var textColor = Colors.blend(_fontStyle.color, _fontStyle.alpha)
|
||||
if (textColor) ctx.fillStyle = textColor
|
||||
}
|
||||
// trace(_fontStyle,opts)
|
||||
},
|
||||
|
||||
text:function(textStr, x, y, opts){ // opts: x,y, color, font, align, baseline, width
|
||||
if (arguments.length>=3 && !isNaN(x)){
|
||||
opts = opts || {}
|
||||
opts.x = x
|
||||
opts.y = y
|
||||
}else if (arguments.length==2 && typeof(x)=='object'){
|
||||
opts = x
|
||||
}else{
|
||||
opts = opts || {}
|
||||
}
|
||||
|
||||
var style = objmerge(_fontStyle, opts)
|
||||
ctx.save()
|
||||
if (style.align!==undefined) ctx.textAlign = style.align
|
||||
if (style.baseline!==undefined) ctx.textBaseline = style.baseline
|
||||
if (style.font!==undefined && !isNaN(style.size)){
|
||||
ctx.font = nano("{size}px {font}", style)
|
||||
}
|
||||
|
||||
var alpha = (style.alpha!==undefined) ? style.alpha : _fontStyle.alpha
|
||||
var color = (style.color!==undefined) ? style.color : _fontStyle.color
|
||||
ctx.fillStyle = Colors.blend(color, alpha)
|
||||
|
||||
// if (alpha>0) ctx.fillText(textStr, style.x, style.y);
|
||||
if (alpha>0) ctx.fillText(textStr, Math.round(style.x), style.y);
|
||||
ctx.restore()
|
||||
},
|
||||
|
||||
textWidth:function(textStr, style){ // style: x,y, color, font, align, baseline, width
|
||||
style = objmerge(_fontStyle, style||{})
|
||||
ctx.save()
|
||||
ctx.font = nano("{size}px {font}", style)
|
||||
var width = ctx.measureText(textStr).width
|
||||
ctx.restore()
|
||||
return width
|
||||
},
|
||||
|
||||
// hasFont:function(fontName){
|
||||
// var testTxt = 'H h H a H m H b H u H r H g H e H r H f H o H n H s H t H i H v H'
|
||||
// ctx.save()
|
||||
// ctx.font = '10px sans-serif'
|
||||
// var defaultWidth = ctx.measureText(testTxt).width
|
||||
//
|
||||
// ctx.font = '10px "'+fontName+'"'
|
||||
// var putativeWidth = ctx.measureText(testTxt).width
|
||||
// ctx.restore()
|
||||
//
|
||||
// // var defaultWidth = that.textWidth(testTxt, {font:"Times New Roman", size:120})
|
||||
// // var putativeWidth = that.textWidth(testTxt, {font:fontName, size:120})
|
||||
// trace(defaultWidth,putativeWidth,ctx.font)
|
||||
// // return (putativeWidth!=defaultWidth || fontName=="Times New Roman")
|
||||
// return putativeWidth!=defaultWidth
|
||||
// },
|
||||
|
||||
|
||||
// shape primitives.
|
||||
// classes will return an {x,y,w,h, fill(), stroke()} object without drawing
|
||||
// functions will draw the shape based on current stroke/fill state
|
||||
Rect:function(x,y,w,h,r,style){
|
||||
return new _Rect(x,y,w,h,r,style)
|
||||
},
|
||||
rect:function(x, y, w, h, r, style){
|
||||
_Rect.prototype._draw(x,y,w,h,r,style)
|
||||
},
|
||||
|
||||
Oval:function(x, y, w, h, style) {
|
||||
return new _Oval(x,y,w,h, style)
|
||||
},
|
||||
oval:function(x, y, w, h, style) {
|
||||
style = style || {}
|
||||
_Oval.prototype._draw(x,y,w,h, style)
|
||||
},
|
||||
|
||||
// draw a line immediately
|
||||
line:function(x1, y1, x2, y2, style){
|
||||
var p = new _Path(x1,y1,x2,y2)
|
||||
p.draw(style)
|
||||
},
|
||||
|
||||
// queue up a line segment to be drawn in a batch by .drawLines
|
||||
lines:function(x1, y1, x2, y2){
|
||||
if (typeof y2=='number'){
|
||||
// ƒ( x1, y1, x2, y2)
|
||||
_lineBuffer.push( [ {x:x1,y:y1}, {x:x2,y:y2} ] )
|
||||
}else{
|
||||
// ƒ( {x:1, y:1}, {x:2, y:2} )
|
||||
_lineBuffer.push( [ x1,y1 ] )
|
||||
}
|
||||
},
|
||||
|
||||
// flush the buffered .lines to screen
|
||||
drawLines:function(style){
|
||||
var p = new _Path(_lineBuffer)
|
||||
p.draw(style)
|
||||
_lineBuffer = []
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
return that.init()
|
||||
}
|
||||
|
||||
|
||||
// // helpers for figuring out where to draw arrows
|
||||
// var intersect_line_line = function(p1, p2, p3, p4)
|
||||
// {
|
||||
// var denom = ((p4.y - p3.y)*(p2.x - p1.x) - (p4.x - p3.x)*(p2.y - p1.y));
|
||||
//
|
||||
// // lines are parallel
|
||||
// if (denom === 0) {
|
||||
// return false;
|
||||
// }
|
||||
//
|
||||
// var ua = ((p4.x - p3.x)*(p1.y - p3.y) - (p4.y - p3.y)*(p1.x - p3.x)) / denom;
|
||||
// var ub = ((p2.x - p1.x)*(p1.y - p3.y) - (p2.y - p1.y)*(p1.x - p3.x)) / denom;
|
||||
//
|
||||
// if (ua < 0 || ua > 1 || ub < 0 || ub > 1) {
|
||||
// return false;
|
||||
// }
|
||||
//
|
||||
// return arbor.Point(p1.x + ua * (p2.x - p1.x), p1.y + ua * (p2.y - p1.y));
|
||||
// }
|
||||
//
|
||||
// var intersect_line_box = function(p1, p2, p3, w, h)
|
||||
// {
|
||||
// var tl = {x: p3.x, y: p3.y};
|
||||
// var tr = {x: p3.x + w, y: p3.y};
|
||||
// var bl = {x: p3.x, y: p3.y + h};
|
||||
// var br = {x: p3.x + w, y: p3.y + h};
|
||||
//
|
||||
// var result;
|
||||
// if (result = intersect_line_line(p1, p2, tl, tr)) { return result; } // top
|
||||
// if (result = intersect_line_line(p1, p2, tr, br)) { return result; } // right
|
||||
// if (result = intersect_line_line(p1, p2, br, bl)) { return result; } // bottom
|
||||
// if (result = intersect_line_line(p1, p2, bl, tl)) { return result; } // left
|
||||
//
|
||||
// return false;
|
||||
// }
|
Loading…
Add table
Add a link
Reference in a new issue