mirror of
https://github.com/konvajs/konva.git
synced 2026-01-23 13:26:07 +08:00
introduced new Context class. I've bumped up the next release to v4.7.0 because this is a relatively big mind shift in how the framework works, and it's a big enough API change to warrant a minor update. This is the first step towards enabling context tracing for stellar unit testing
This commit is contained in:
@@ -20,7 +20,7 @@ Test.Modules.LAYER = {
|
||||
layer.add(circle);
|
||||
stage.add(layer);
|
||||
|
||||
var style = layer.getCanvas().getElement().style;
|
||||
var style = layer.getCanvas()._canvas.style;
|
||||
|
||||
test(style.position === 'absolute', 'canvas position style should be absolute');
|
||||
test(style.border === '0px', 'canvas border style should be 0px');
|
||||
|
||||
@@ -171,7 +171,7 @@ Test.Modules.NODE = {
|
||||
layer.canvas = new Kinetic.SceneCanvas({
|
||||
pixelRatio: 2
|
||||
});
|
||||
layer.canvas.getElement().style.position = 'absolute';
|
||||
layer.canvas._canvas.style.position = 'absolute';
|
||||
|
||||
var circle = new Kinetic.Circle({
|
||||
x: stage.getWidth() / 2,
|
||||
@@ -614,11 +614,11 @@ Test.Modules.NODE = {
|
||||
test(layer2.isVisible(), 'layer2 should be visible');
|
||||
layer2.hide();
|
||||
test(!layer2.isVisible(), 'layer2 should be invisible');
|
||||
test(layer2.canvas.element.style.display === 'none', 'layer canvas element display should be none');
|
||||
test(layer2.canvas._canvas.style.display === 'none', 'layer canvas element display should be none');
|
||||
|
||||
layer2.show();
|
||||
test(layer2.isVisible(), 'layer2 should be visible');
|
||||
test(layer2.canvas.element.style.display === 'block', 'layer canvas element should be block');
|
||||
test(layer2.canvas._canvas.style.display === 'block', 'layer canvas element should be block');
|
||||
|
||||
},
|
||||
'rotation in degrees': function(containerId) {
|
||||
@@ -2133,15 +2133,14 @@ Test.Modules.NODE = {
|
||||
var layer = new Kinetic.Layer();
|
||||
var group = new Kinetic.Group();
|
||||
|
||||
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();
|
||||
canvas.fill(this);
|
||||
canvas.stroke(this);
|
||||
var drawTriangle = function(context) {
|
||||
var _context = context._context;
|
||||
_context.beginPath();
|
||||
_context.moveTo(200, 50);
|
||||
_context.lineTo(420, 80);
|
||||
_context.quadraticCurveTo(300, 100, 260, 170);
|
||||
_context.closePath();
|
||||
context.fillStroke(this);
|
||||
};
|
||||
var triangle = new Kinetic.Shape({
|
||||
drawFunc: drawTriangle,
|
||||
@@ -2168,15 +2167,14 @@ Test.Modules.NODE = {
|
||||
|
||||
},
|
||||
'load stage with custom shape using json': function(containerId) {
|
||||
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();
|
||||
canvas.fill(this);
|
||||
canvas.stroke(this);
|
||||
var drawTriangle = function(context) {
|
||||
var _context = context._context;
|
||||
_context.beginPath();
|
||||
_context.moveTo(200, 50);
|
||||
_context.lineTo(420, 80);
|
||||
_context.quadraticCurveTo(300, 100, 260, 170);
|
||||
_context.closePath();
|
||||
context.fillStroke(this);
|
||||
};
|
||||
var json = '{"attrs":{"width":578,"height":200},"nodeType":"Stage","children":[{"attrs":{},"nodeType":"Layer","children":[{"attrs":{},"nodeType":"Group","children":[{"attrs":{"fill":"#00D2FF","stroke":"black","strokeWidth":4,"id":"myTriangle"},"nodeType":"Shape"}]}]}]}';
|
||||
|
||||
|
||||
@@ -128,14 +128,14 @@ Test.Modules.SHAPE = {
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var shape = new Kinetic.Shape({
|
||||
drawFunc: function(canvas) {
|
||||
var context = canvas.getContext();
|
||||
context.beginPath();
|
||||
context.moveTo(0, 0);
|
||||
context.lineTo(100, 0);
|
||||
context.lineTo(100, 100);
|
||||
context.closePath();
|
||||
canvas.fillStroke(this);
|
||||
drawFunc: function(context) {
|
||||
var _context = context._context;
|
||||
_context.beginPath();
|
||||
_context.moveTo(0, 0);
|
||||
_context.lineTo(100, 0);
|
||||
_context.lineTo(100, 100);
|
||||
_context.closePath();
|
||||
context.fillStroke(this);
|
||||
},
|
||||
x: 10,
|
||||
y: 10,
|
||||
@@ -164,15 +164,15 @@ Test.Modules.SHAPE = {
|
||||
});
|
||||
var layer = new Kinetic.Layer();
|
||||
var shape = new Kinetic.Shape({
|
||||
drawFunc: function(canvas) {
|
||||
var context = canvas.getContext();
|
||||
context.beginPath();
|
||||
context.moveTo(0, 0);
|
||||
context.lineTo(100, 0);
|
||||
context.lineTo(100, 100);
|
||||
context.closePath();
|
||||
canvas.fill(this);
|
||||
canvas.stroke(this);
|
||||
drawFunc: function(context) {
|
||||
var _context = context._context;
|
||||
|
||||
_context.beginPath();
|
||||
_context.moveTo(0, 0);
|
||||
_context.lineTo(100, 0);
|
||||
_context.lineTo(100, 100);
|
||||
_context.closePath();
|
||||
context.fillStroke(this);
|
||||
},
|
||||
x: 200,
|
||||
y: 100,
|
||||
|
||||
@@ -77,8 +77,8 @@ Test.Modules.STAGE = {
|
||||
test(stage.getSize().height === 155, 'stage height should be 155');
|
||||
test(stage.getContent().style.width === '333px', 'content width should be 333');
|
||||
test(stage.getContent().style.height === '155px', 'content height should be 155px');
|
||||
test(layer.getCanvas().element.width === 333, 'layer canvas element width should be 333');
|
||||
test(layer.getCanvas().element.height === 155, 'layer canvas element width should be 155');
|
||||
test(layer.getCanvas()._canvas.width === 333, 'layer canvas element width should be 333');
|
||||
test(layer.getCanvas()._canvas.height === 155, 'layer canvas element width should be 155');
|
||||
},
|
||||
'get stage DOM': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
|
||||
Reference in New Issue
Block a user