lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 17:21:36 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

moved all rendering logic into the Canvas renderer modules. Shape draw funcs are now passed a renderer object, not a canvas context. The context is accessible via canvas.getContext()

Browse Source
This commit is contained in:
Eric Rowell
2012-12-09 09:52:33 -08:00
parent 9be03d6eab
commit 291583148b
23 changed files with 292 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
tests/assets/unitDataUrls.js
View File

File diff suppressed because one or more lines are too long

40
tests/js/functionalTests.js
View File

@@ -38,7 +38,6 @@ Test.Modules.DD = {
circle.on('dragend', function() {
dragEnd = true;
});
warn(layer.toDataURL() === dataUrls['drag circle before'], 'start data url is incorrect');
/*
* simulate drag and drop
@@ -179,7 +178,7 @@ Test.Modules.DD = {
var top = stage.content.getBoundingClientRect().top;
//console.log(layer.toDataURL())
//console.log(layer.toDataURL())
warn(layer.toDataURL() === dataUrls['drag layer before'], 'start data url is incorrect');
/*
@@ -199,7 +198,7 @@ Test.Modules.DD = {
clientX: 210,
clientY: 109 + top
});
//console.log(layer.toDataURL())
//console.log(layer.toDataURL())
warn(layer.toDataURL() === dataUrls['drag layer after'], 'end data url is incorrect');
}
@@ -869,12 +868,13 @@ Test.Modules['HIT FUNCS'] = {
strokeWidth: 4,
fill: 'red',
stroke: 'black',
drawHitFunc: function(context) {
drawHitFunc: function(canvas) {
var context = canvas.getContext()
context.beginPath();
context.arc(0, 0, this.getRadius() + 100, 0, Math.PI * 2, true);
context.closePath();
this.fill(context);
this.stroke(context);
canvas.fill(this);
canvas.stroke(this);
}
});
@@ -895,8 +895,7 @@ Test.Modules['HIT FUNCS'] = {
circle.on('mouseout', function() {
mouseouts++;
});
// move mouse far outside circle
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
@@ -923,47 +922,48 @@ Test.Modules['HIT FUNCS'] = {
// set drawBufferFunc with setter
circle.setDrawHitFunc(function(context) {
circle.setDrawHitFunc(function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.arc(0, 0, this.getRadius() - 50, 0, Math.PI * 2, true);
context.closePath();
this.fill(context);
this.stroke(context);
canvas.fill(this);
canvas.stroke(this);
});
layer.drawHit();
// move mouse far outside circle
stage._mousemove({
clientX: 113,
clientY: 112 + top
});
test(mouseovers === 1, 'mouseovers should be 1');
test(mouseouts === 1, 'mouseouts should be 1');
stage._mousemove({
clientX: 286,
clientY: 118 + top
});
test(mouseovers === 1, 'mouseovers should be 1');
test(mouseouts === 1, 'mouseouts should be 1');
stage._mousemove({
clientX: 321,
clientY: 112 + top
});
test(mouseovers === 1, 'mouseovers should be 1');
test(mouseouts === 1, 'mouseouts should be 1');
// move to center of circle
stage._mousemove({
clientX: 375,
clientY: 112 + top
});
test(mouseovers === 2, 'mouseovers should be 2');
test(mouseouts === 1, 'mouseouts should be 1');
}

3
tests/js/unit/containerTests.js
View File

@@ -625,8 +625,11 @@ Test.Modules.CONTAINER = {
test(group.get('Rect').length === 1, 'group should have 1 rects');
test(group.get('Circle').length === 1, 'gropu should have 1 circles');
//console.log(dataUrls['node shape type selector']);
stage.toDataURL({
callback: function(dataUrl) {
//console.log(dataUrl)
warn(dataUrl === dataUrls['node shape type selector'], 'problem with node and shape type selector render.');
}
});

16
tests/js/unit/nodeTests.js
View File

@@ -278,6 +278,7 @@ Test.Modules.NODE = {
draggable: true,
name: 'myGroup'
});
var rect = new Kinetic.Rect({
x: 0,
y: 50,
@@ -741,7 +742,6 @@ Test.Modules.NODE = {
width: 500,
height: 300,
callback: function(imageObj) {
//document.body.appendChild(imageObj)
test(Kinetic.Type._isElement(imageObj), 'shape toImage() should be an image object');
@@ -2008,14 +2008,15 @@ Test.Modules.NODE = {
var layer = new Kinetic.Layer();
var group = new Kinetic.Group();
var drawTriangle = function(context) {
var drawTriangle = function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.fill(context);
this.stroke(context);
canvas.fill(this);
canvas.stroke(this);
};
var triangle = new Kinetic.Shape({
drawFunc: drawTriangle,
@@ -2051,14 +2052,15 @@ Test.Modules.NODE = {
},
'load stage with custom shape using json': function(containerId) {
var drawTriangle = function(context) {
var drawTriangle = function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.fill(context);
this.stroke(context);
canvas.fill(this);
canvas.stroke(this);
};
var json = '{"attrs":{"width":578,"height":200,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Stage","children":[{"attrs":{"clearBeforeDraw":true,"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Layer","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false},"nodeType":"Group","children":[{"attrs":{"visible":true,"listening":true,"opacity":1,"x":0,"y":0,"scale":{"x":1,"y":1},"rotation":0,"offset":{"x":0,"y":0},"draggable":false,"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';

35
tests/js/unit/shapeTests.js
View File

@@ -53,20 +53,21 @@ Test.Modules.SHAPE = {
});
var layer = new Kinetic.Layer();
var drawTriangle = function(context) {
var drawTriangle = function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(200, 50);
context.lineTo(420, 80);
context.quadraticCurveTo(300, 100, 260, 170);
context.closePath();
this.fillStroke(context);
canvas.fillStroke(this);
context.beginPath();
context.moveTo(300, 150);
context.lineTo(520, 180);
context.quadraticCurveTo(400, 200, 360, 270);
context.closePath();
this.fillStroke(context);
canvas.fillStroke(this);
};
var triangle = new Kinetic.Shape({
drawFunc: drawTriangle,
@@ -98,14 +99,15 @@ Test.Modules.SHAPE = {
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(context) {
drawFunc: function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
this.fill(context);
this.stroke(context);
canvas.fill(this);
canvas.stroke(this);
},
x: 200,
y: 100,
@@ -125,14 +127,15 @@ Test.Modules.SHAPE = {
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Shape({
drawFunc: function(context) {
drawFunc: function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100, 0);
context.lineTo(100, 100);
context.closePath();
this.fill(context);
this.stroke(context);
canvas.fill(this);
canvas.stroke(this);
},
x: 200,
y: 100,
@@ -141,14 +144,15 @@ Test.Modules.SHAPE = {
strokeWidth: 5
});
shape.setDrawFunc(function(context) {
shape.setDrawFunc(function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
context.lineTo(200, 100);
context.closePath();
this.fill(context);
this.stroke(context);
canvas.fill(this);
canvas.stroke(this);
});
var rect = new Kinetic.Rect({
x: 10,
@@ -161,14 +165,15 @@ Test.Modules.SHAPE = {
draggable: true
});
rect.setDrawFunc(function(context) {
rect.setDrawFunc(function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(200, 0);
context.lineTo(200, 100);
context.closePath();
this.fill(context);
this.stroke(context);
canvas.fill(this);
canvas.stroke(this);
});
layer.add(shape);