better capable konva context with native context

2025-09-19 10:47:59 +08:00 · 2015-04-08 22:26:25 +07:00
parent a554f4e979
commit 18cce13ea5
4 changed files with 149 additions and 57 deletions
--- a/test/runner.html
+++ b/test/runner.html
@@ -33,65 +33,68 @@
    <script src="lib/stats.js"></script>

    <!--<script src="lib/blanket.js"></script>-->
-    <!--// core-->
-    <!--<script src="../src/Global.js" data-cover></script>-->
-    <!--<script src="../src/Util.js" data-cover></script>-->
-    <!--<script src="../src/Canvas.js" data-cover></script>-->
-    <!--<script src="../src/Context.js" data-cover></script>-->
-    <!--<script src="../src/Factory.js" data-cover></script>-->
-    <!--<script src="../src/Node.js" data-cover></script>-->

-    <!--// filters-->
-    <!--<script src="../src/filters/Grayscale.js" data-cover></script>-->
-    <!--<script src="../src/filters/Brighten.js" data-cover></script>-->
-    <!--<script src="../src/filters/Invert.js" data-cover></script>-->
-    <!--<script src="../src/filters/Blur.js" data-cover></script>-->
-    <!--<script src="../src/filters/Mask.js" data-cover></script>-->
-    <!--<script src="../src/filters/RGB.js" data-cover></script>-->
-    <!--<script src="../src/filters/HSV.js" data-cover></script>-->
-    <!--<script src="../src/filters/HSL.js" data-cover></script>-->
-    <!--<script src="../src/filters/Emboss.js" data-cover></script>-->
-    <!--<script src="../src/filters/Enhance.js" data-cover></script>-->
-    <!--<script src="../src/filters/Posterize.js" data-cover></script>-->
-    <!--<script src="../src/filters/Noise.js" data-cover></script>-->
-    <!--<script src="../src/filters/Pixelate.js" data-cover></script>-->
-    <!--<script src="../src/filters/Threshold.js" data-cover></script>-->
-    <!--<script src="../src/filters/Sepia.js" data-cover></script>-->
-    <!--<script src="../src/filters/Solarize.js" data-cover></script>-->
-    <!--<script src="../src/filters/Kaleidoscope.js" data-cover></script>-->
+    <!--CORE-->
+    <script src="../src/Global.js" data-cover></script>
+    <script src="../src/Util.js" data-cover></script>
+    <script src="../src/Canvas.js" data-cover></script>
+    <script src="../src/Context.js" data-cover></script>
+    <script src="../src/Factory.js" data-cover></script>
+    <script src="../src/Node.js" data-cover></script>

-    <!--// core-->
-    <!--<script src="../src/Animation.js" data-cover></script>-->
-    <!--<script src="../src/Tween.js" data-cover></script>-->
-    <!--<script src="../src/DragAndDrop.js" data-cover></script>-->
-    <!--<script src="../src/Container.js" data-cover></script>-->
-    <!--<script src="../src/Shape.js" data-cover></script>-->
-    <!--<script src="../src/Stage.js" data-cover></script>-->
-    <!--<script src="../src/BaseLayer.js" data-cover></script>-->
-    <!--<script src="../src/Layer.js" data-cover></script>-->
-    <!--<script src="../src/FastLayer.js" data-cover></script>-->
-    <!--<script src="../src/Group.js" data-cover></script>-->
+    <!--FILTERS-->
+    <script src="../src/filters/Grayscale.js" data-cover></script>
+    <script src="../src/filters/Brighten.js" data-cover></script>
+    <script src="../src/filters/Invert.js" data-cover></script>
+    <script src="../src/filters/Blur.js" data-cover></script>
+    <script src="../src/filters/Mask.js" data-cover></script>
+    <script src="../src/filters/RGB.js" data-cover></script>
+    <script src="../src/filters/HSV.js" data-cover></script>
+    <script src="../src/filters/HSL.js" data-cover></script>
+    <script src="../src/filters/Emboss.js" data-cover></script>
+    <script src="../src/filters/Enhance.js" data-cover></script>
+    <script src="../src/filters/Posterize.js" data-cover></script>
+    <script src="../src/filters/Noise.js" data-cover></script>
+    <script src="../src/filters/Pixelate.js" data-cover></script>
+    <script src="../src/filters/Threshold.js" data-cover></script>
+    <script src="../src/filters/Sepia.js" data-cover></script>
+    <script src="../src/filters/Solarize.js" data-cover></script>
+    <script src="../src/filters/Kaleidoscope.js" data-cover></script>

-    <!--// shapes-->
-    <!--<script src="../src/shapes/Rect.js" data-cover></script>-->
-    <!--<script src="../src/shapes/Circle.js" data-cover></script>-->
-    <!--<script src="../src/shapes/Ellipse.js" data-cover></script>-->
-    <!--<script src="../src/shapes/Ring.js" data-cover></script>-->
-    <!--<script src="../src/shapes/Wedge.js" data-cover></script>-->
-    <!--<script src="../src/shapes/Arc.js" data-cover></script>-->
-    <!--<script src="../src/shapes/Image.js" data-cover></script>-->
-    <!--<script src="../src/shapes/Text.js" data-cover></script>-->
-    <!--<script src="../src/shapes/Line.js" data-cover></script>-->
-    <!--<script src="../src/shapes/Sprite.js" data-cover></script>-->
+    <!--MAIN ELEMENTS-->

-    <!--// plugins-->
-    <!--<script src="../src/plugins/Path.js" data-cover></script>-->
-    <!--<script src="../src/plugins/TextPath.js" data-cover></script>-->
-    <!--<script src="../src/plugins/RegularPolygon.js" data-cover></script>-->
-    <!--<script src="../src/plugins/Star.js" data-cover></script>-->
-    <!--<script src="../src/plugins/Label.js" data-cover></script>-->
-    <!--<script src="../src/plugins/Arrow.js" data-cover></script>-->
-    <script src="../dist/konva-dev.js"></script>
+    <script src="../src/Container.js" data-cover></script>
+    <script src="../src/Shape.js" data-cover></script>
+    <script src="../src/Stage.js" data-cover></script>
+    <script src="../src/BaseLayer.js" data-cover></script>
+    <script src="../src/Layer.js" data-cover></script>
+    <script src="../src/FastLayer.js" data-cover></script>
+    <script src="../src/Group.js" data-cover></script>
+    <script src="../src/Animation.js" data-cover></script>
+    <script src="../src/Tween.js" data-cover></script>
+    <script src="../src/DragAndDrop.js" data-cover></script>
+
+    <!--SHAPES-->
+    <script src="../src/shapes/Rect.js" data-cover></script>
+    <script src="../src/shapes/Circle.js" data-cover></script>
+    <script src="../src/shapes/Ellipse.js" data-cover></script>
+    <script src="../src/shapes/Ring.js" data-cover></script>
+    <script src="../src/shapes/Wedge.js" data-cover></script>
+    <script src="../src/shapes/Arc.js" data-cover></script>
+    <script src="../src/shapes/Image.js" data-cover></script>
+    <script src="../src/shapes/Text.js" data-cover></script>
+    <script src="../src/shapes/Line.js" data-cover></script>
+    <script src="../src/shapes/Sprite.js" data-cover></script>
+
+    <!--PLUGINS-->
+    <script src="../src/plugins/Path.js" data-cover></script>
+    <script src="../src/plugins/TextPath.js" data-cover></script>
+    <script src="../src/plugins/RegularPolygon.js" data-cover></script>
+    <script src="../src/plugins/Star.js" data-cover></script>
+    <script src="../src/plugins/Label.js" data-cover></script>
+    <script src="../src/plugins/Arrow.js" data-cover></script>
+
+    <!--<script src="../dist/konva-dev.js"></script>-->

    <script src="lib/imagediff.js"></script>
    <script src="runner.js"></script>
@@ -106,6 +109,7 @@
    <script src="unit/Global-test.js"></script>
    <script src="unit/Util-test.js"></script>
    <script src="unit/Canvas-test.js"></script>
+    <script src="unit/Context-test.js"></script>
    <script src="unit/Node-test.js"></script>
    <script src="unit/Node-cache-test.js"></script>
    <script src="unit/Container-test.js"></script>
@@ -170,8 +174,8 @@
    <script src="functional/TouchEvents-test.js"></script>
    <script src="functional/DragAndDropEvents-test.js"></script>

-    <!--=============== manual tests ================-->
-    <script src="manual/manual-test.js"></script>
+    <!--&lt;!&ndash;=============== manual tests ================&ndash;&gt;-->
+    <!--<script src="manual/manual-test.js"></script>-->

    <script>
      if (window.mochaPhantomJS) { mochaPhantomJS.run(); }
--- a/test/unit/Context-test.js
+++ b/test/unit/Context-test.js
@@ -0,0 +1,54 @@
+suite('Context', function() {
+    // ======================================================
+    var contextMethods = ['clearRect', 'fillRect', 'strokeRect',
+        'fillText', 'strokeText', 'measureText', 'getLineDash', 'setLineDash',
+        'createLinearGradient', 'createRadialGradient', 'createPattern',
+        'beginPath', 'closePath', 'moveTo', 'lineTo', 'bezierCurveTo', 'quadraticCurveTo',
+        'arc', 'arcTo', 'rect', 'fill', 'stroke', 'clip', 'isPointInPath',
+        'scale', 'rotate', 'translate', 'transform', 'setTransform', 'drawImage',
+        'createImageData', 'getImageData', 'putImageData', 'save', 'restore'];
+
+    var contextProperties = ['fillStyle', 'strokeStyle', 'shadowColor', 'shadowBlur', 'shadowOffsetX',
+        'shadowOffsetY', 'lineCap', 'lineJoin', 'lineWidth', 'miterLimit', 'font', 'textAlign', 'textBaseline',
+        'globalAlpha', 'globalCompositeOperation'];
+
+    test('context wrapper should work like native context', function() {
+        var stage = addStage();
+
+        var layer = new Konva.Layer();
+
+        var circle = new Konva.Circle({
+            x: 100,
+            y: 70,
+            radius: 70,
+            fill: 'green',
+            stroke: 'blue',
+            strokeWidth: 4,
+            draggable : true
+        });
+
+        layer.add(circle);
+        stage.add(layer);
+
+        var context = layer.getContext();
+        var nativeContext = context._context;
+
+        contextMethods.forEach(function(method) {
+            assert.equal(typeof nativeContext[method], 'function', 'native context has no method ' + method);
+            assert.equal(typeof context[method], 'function', 'context wrapper has no method ' + method);
+        });
+
+        contextProperties.forEach(function(prop) {
+            assert.equal(nativeContext.hasOwnProperty(prop), true, 'native context has no property ' + prop);
+            assert.equal(context[prop] !== undefined, true, 'context wrapper has no property ' + prop);
+        });
+
+        // test get
+        nativeContext.fillStyle = '#ff0000';
+        assert.equal(context.fillStyle, '#ff0000');
+
+        // test set
+        context.globalAlpha = 0.5;
+        assert.equal(context.globalAlpha, 0.5);
+    });
+});