mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-07-09 06:04:26 +02:00
in the beginning
This commit is contained in:
Peter Cottle
commit
a817cec5f5
23 changed files with 4243 additions and 0 deletions
252
arbor_src/graphics/primitives.js
Normal file
252
arbor_src/graphics/primitives.js
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
//
|
||||
// primitives
|
||||
//
|
||||
// Created by Christian Swinehart on 2010-12-08.
|
||||
// Copyright (c) 2011 Samizdat Drafting Co. All rights reserved.
|
||||
//
|
||||
|
||||
|
||||
var Primitives = function(ctx, _drawStyle, _fontStyle){
|
||||
|
||||
///MACRO:primitives-start
|
||||
var _Oval = function(x,y,w,h,style){
|
||||
this.x = x
|
||||
this.y = y
|
||||
this.w = w
|
||||
this.h = h
|
||||
this.style = (style!==undefined) ? style : {}
|
||||
}
|
||||
_Oval.prototype = {
|
||||
draw:function(overrideStyle){
|
||||
this._draw(overrideStyle)
|
||||
},
|
||||
|
||||
_draw:function(x,y,w,h, style){
|
||||
if (objcontains(x, 'stroke', 'fill', 'width')) style = x
|
||||
if (this.x!==undefined){
|
||||
x=this.x, y=this.y, w=this.w, h=this.h;
|
||||
style = objmerge(this.style, style)
|
||||
}
|
||||
style = objmerge(_drawStyle, style)
|
||||
if (!style.stroke && !style.fill) return
|
||||
|
||||
var kappa = .5522848;
|
||||
ox = (w / 2) * kappa, // control point offset horizontal
|
||||
oy = (h / 2) * kappa, // control point offset vertical
|
||||
xe = x + w, // x-end
|
||||
ye = y + h, // y-end
|
||||
xm = x + w / 2, // x-middle
|
||||
ym = y + h / 2; // y-middle
|
||||
|
||||
ctx.save()
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, ym);
|
||||
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
|
||||
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
|
||||
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
|
||||
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
|
||||
ctx.closePath();
|
||||
|
||||
// trace(style.fill, style.stroke)
|
||||
if (style.fill!==null){
|
||||
// trace("fill",fillColor, Colors.encode(fillColor))
|
||||
if (style.alpha!==undefined) ctx.fillStyle = Colors.blend(style.fill, style.alpha)
|
||||
else ctx.fillStyle = Colors.encode(style.fill)
|
||||
ctx.fill()
|
||||
}
|
||||
|
||||
if (style.stroke!==null){
|
||||
ctx.strokeStyle = Colors.encode(style.stroke)
|
||||
if (!isNaN(style.width)) ctx.lineWidth = style.width
|
||||
ctx.stroke()
|
||||
}
|
||||
ctx.restore()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var _Rect = function(x,y,w,h,r,style){
|
||||
if (objcontains(r, 'stroke', 'fill', 'width')){
|
||||
style = r
|
||||
r = 0
|
||||
}
|
||||
this.x = x
|
||||
this.y = y
|
||||
this.w = w
|
||||
this.h = h
|
||||
this.r = (r!==undefined) ? r : 0
|
||||
this.style = (style!==undefined) ? style : {}
|
||||
}
|
||||
_Rect.prototype = {
|
||||
draw:function(overrideStyle){
|
||||
this._draw(overrideStyle)
|
||||
},
|
||||
|
||||
_draw:function(x,y,w,h,r, style){
|
||||
if (objcontains(r, 'stroke', 'fill', 'width', 'alpha')){
|
||||
style = r; r=0;
|
||||
}else if (objcontains(x, 'stroke', 'fill', 'width', 'alpha')){
|
||||
style = x
|
||||
}
|
||||
if (this.x!==undefined){
|
||||
x=this.x, y=this.y, w=this.w, h=this.h;
|
||||
style = objmerge(this.style, style)
|
||||
}
|
||||
style = objmerge(_drawStyle, style)
|
||||
if (!style.stroke && !style.fill) return
|
||||
|
||||
var rounded = (r>0)
|
||||
ctx.save()
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x+r, y);
|
||||
ctx.lineTo(x+w-r, y);
|
||||
if (rounded) ctx.quadraticCurveTo(x+w, y, x+w, y+r);
|
||||
ctx.lineTo(x+w, y+h-r);
|
||||
if (rounded) ctx.quadraticCurveTo(x+w, y+h, x+w-r, y+h);
|
||||
ctx.lineTo(x+r, y+h);
|
||||
if (rounded) ctx.quadraticCurveTo(x, y+h, x, y+h-r);
|
||||
ctx.lineTo(x, y+r);
|
||||
if (rounded) ctx.quadraticCurveTo(x, y, x+r, y);
|
||||
|
||||
|
||||
if (style.fill!==null){
|
||||
if (style.alpha!==undefined) ctx.fillStyle = Colors.blend(style.fill, style.alpha)
|
||||
else ctx.fillStyle = Colors.encode(style.fill)
|
||||
ctx.fill()
|
||||
}
|
||||
|
||||
if (style.stroke!==null){
|
||||
ctx.strokeStyle = Colors.encode(style.stroke)
|
||||
if (!isNaN(style.width)) ctx.lineWidth = style.width
|
||||
ctx.stroke()
|
||||
}
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
|
||||
var _Path = function(x1, y1, x2, y2, style){
|
||||
// calling patterns:
|
||||
// ƒ( x1, y1, x2, y2, <style> )
|
||||
// ƒ( {x:1, y:1}, {x:2, y:2}, <style> )
|
||||
// ƒ( [ {x:1, y:1}, {x:2, y:2}, ...], <style> ) one continuous line
|
||||
// ƒ( [ [{x,y}, {x,y}], [{x,y}, {x,y}], ...], <style> ) separate lines
|
||||
|
||||
if (style!==undefined || typeof y2=='number'){
|
||||
// ƒ( x1, y1, x2, y2, <style> )
|
||||
this.points = [ {x:x1,y:y1}, {x:x2,y:y2} ]
|
||||
this.style = style || {}
|
||||
}else if ($.isArray(x1)){
|
||||
// ƒ( [ {x:1, y:1}, {x:2, y:2}, ...], <style> )
|
||||
this.points = x1
|
||||
this.style = y1 || {}
|
||||
}else{
|
||||
// ƒ( {x:1, y:1}, {x:2, y:2}, <style> )
|
||||
this.points = [ x1, y1 ]
|
||||
this.style = x2 || {}
|
||||
}
|
||||
}
|
||||
_Path.prototype = {
|
||||
draw:function(overrideStyle){
|
||||
if (this.points.length<2) return
|
||||
|
||||
var sublines = []
|
||||
if (!$.isArray(this.points[0])) sublines.push(this.points)
|
||||
else sublines = this.points
|
||||
|
||||
ctx.save()
|
||||
ctx.beginPath();
|
||||
$.each(sublines, function(i, lineseg){
|
||||
ctx.moveTo(lineseg[0].x+.5, lineseg[0].y+.5);
|
||||
$.each(lineseg, function(i, pt){
|
||||
if (i==0) return
|
||||
ctx.lineTo(pt.x+.5, pt.y+.5);
|
||||
})
|
||||
})
|
||||
|
||||
var style = $.extend(objmerge(_drawStyle, this.style), overrideStyle)
|
||||
if (style.closed) ctx.closePath()
|
||||
|
||||
if (style.fill!==undefined){
|
||||
var fillColor = Colors.decode(style.fill, (style.alpha!==undefined) ? style.alpha : 1)
|
||||
if (fillColor) ctx.fillStyle = Colors.encode(fillColor)
|
||||
ctx.fill()
|
||||
}
|
||||
|
||||
if (style.stroke!==undefined){
|
||||
var strokeColor = Colors.decode(style.stroke, (style.alpha!==undefined) ? style.alpha : 1)
|
||||
if (strokeColor) ctx.strokeStyle = Colors.encode(strokeColor)
|
||||
if (!isNaN(style.width)) ctx.lineWidth = style.width
|
||||
ctx.stroke()
|
||||
}
|
||||
ctx.restore()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var _Color = function(a,b,c,d){
|
||||
var rgba = Colors.decode(a,b,c,d)
|
||||
if (rgba){
|
||||
this.r = rgba.r
|
||||
this.g = rgba.g
|
||||
this.b = rgba.b
|
||||
this.a = rgba.a
|
||||
}
|
||||
}
|
||||
|
||||
_Color.prototype = {
|
||||
toString:function(){
|
||||
return Colors.encode(this)
|
||||
},
|
||||
blend:function(){
|
||||
trace("blend",this.r,this.g,this.b,this.a)
|
||||
}
|
||||
}
|
||||
|
||||
// var _Font = function(face, size){
|
||||
// this.face = (face!=undefined) ? face : "sans-serif"
|
||||
// this.size = (size!=undefined) ? size : 12
|
||||
// // this.alignment = (opts.alignment!=undefined) ? alignment : "left"
|
||||
// // this.baseline = (opts.baseline!=undefined) ? baseline : "ideographic"
|
||||
// // this.color = (opts.color!=undefined) ? Colors.decode(opts.color) : Colors.decode("black")
|
||||
// }
|
||||
// _Font.prototype = {
|
||||
// _use:function(face, size){
|
||||
// // var params = $.extend({face:face, size:size}, opts)
|
||||
// // $.each('face size alignment baseline color'.split(" "), function(i, param){
|
||||
// // if (params[param]!==undefined){
|
||||
// // if (param=='color') _fontStyle[param] = Colors.decode(params[param])
|
||||
// // else _fontStyle[param] = params[param]
|
||||
// // }
|
||||
// // })
|
||||
//
|
||||
// // ctx.textAlign = _fontStyle.alignment
|
||||
// // ctx.textBaseline = _fontStyle.baseline
|
||||
// ctx.font = nano("{size}px {face}", {face:face, size:size})
|
||||
// // trace(ctx.font,face,size)
|
||||
// // ctx.fillStyle = Colors.encode(_fontStyle)
|
||||
// // _fontStyle = {face:face, size:size, alignment:opts.alignment, baseline:opts.baseline, color:opts.color}
|
||||
// },
|
||||
// use:function(){
|
||||
// ctx.font = nano("{size}px {face}", this)
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//
|
||||
|
||||
///MACRO:primitives-end
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return {
|
||||
_Oval:_Oval,
|
||||
_Rect:_Rect,
|
||||
_Color:_Color,
|
||||
_Path:_Path
|
||||
// _Frame:Frame
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue