javascript - KineticJS:如何缓存一组形状？

Question

我想提高 Canvas 对象的移动拖放性能。我有一个包含不同形状(图像、星星、记录...)的组。我想使用缓存来提高拖放或旋转整个组时的性能。

这是我创建的 JSFiddle:http://jsfiddle.net/confile/k4Lsv73d/

function setFPSMeter() {
    var RAF = (function () {
        return window["requestAnimationFrame"] || window["webkitRequestAnimationFrame"] || window["mozRequestAnimationFrame"] || window["oRequestAnimationFrame"] || window["msRequestAnimationFrame"] || FRAF;
    })();

    function FRAF(callback) {
        window.setTimeout(callback, 1000 / 60);
    }

    var fpsDiv = document.createElement("div");
    fpsDiv.style.position = "absolute";
    fpsDiv.style.zIndex="40000";
    document.body.appendChild(fpsDiv);

    var meter = new window.FPSMeter(fpsDiv, {
        position: 'fixed',
        zIndex: 10,
        right: '5px',
        top: '5px',
        left: 'auto',
        bottom: 'auto',
        margin: '0 0 0 0',
        interval: 1000,
        graph: true,
        history: 20,
        theme: 'colorful',
        heat: true
    });
    var tick = function () {
        meter.tick();
        RAF(tick);
    };
    tick();
}

setFPSMeter();

console.log(!!window.FPSMeter);

Kinetic.pixelRatio = 1;
//console.log(window.requestAnimationFrame);
// http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js

var width = $("#container").width();
var height = $("#container").height();
console.log("width: "+width+" height: "+height);

var stage = new Kinetic.Stage({
    container: 'container',
    width: width,
    height: 400
});

var layer = new Kinetic.Layer();
// add the layer to the stage
stage.add(layer);


var blob;
var imageObj = new Image();
imageObj.onload = function () {

    var group = new Kinetic.Group({
        draggable: true
    });

    var star = new Kinetic.Star({
        innerRadius: 50,
        outerRadius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 5,
        numPoints: 20,
        x: 200,
        y: 100,
        shadowOffset: 5,
        shadowColor: 'black',
        shadowBlur: 5,
        shadowOpacity: 0.5
      });

    blob = new Kinetic.Image({
        image: imageObj,
        x: 50,
        y: 40,
     //   draggable: true,
        width: 300,
        height: 300
    });

    // performance
    // blob.transformsEnabled('position');
    group.add(blob);
    group.add(star);
    //  setTimeout(function () {
    // add the shape to the layer
    //layer.add(blob);
    layer.add(group);
   // blob.cache();

    layer.batchDraw();
    //  }, 50);


    loadEvents();

    /*
    blob.cache({
        width: 500,
        height: 500,
        drawBorder: true
      }).offset({
        x: 10,
        y: 10
      });
     */

    /*
    blob.cache({
        drawBorder: true
        });
    */


};

imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/sandwich2.svg";


function getDistance(p1, p2) {
        return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
      }

function loadEvents() {
    var lastDist = 0;
    var startScale = 1;

    stage.getContent().addEventListener('touchstart', function (evt) {
        console.log("touchstart");
        blob.clearCache();
        blob.cache();
    }, false);

    stage.getContent().addEventListener('touchmove', function (evt) {
     clearCache
        var touch1 = evt.touches[0];
        var touch2 = evt.touches[1];

        if (touch1 && touch2) {

           // blob.draggable(false);

            var dist = getDistance({
                x: touch1.clientX,
                y: touch1.clientY
            }, {
                x: touch2.clientX,
                y: touch2.clientY
            });


            if (lastDist == 0) {
                lastDist = dist;
            }
            console.log("touchmove dist: "+dist);
            console.log("touchmove lastDist: "+lastDist);
            console.log("blob.getScale().x: "+blob.getScale().x);
            // scale

            var scale = blob.getScale().x * dist / lastDist;
            console.log("scale: "+scale);

            blob.setScale(scale);

            lastDist = dist;

            //// rotate




            ///

            layer.batchDraw();
        }
    }, false);

    stage.getContent().addEventListener('touchend', function (evt) {
        console.log("touchend");
       // blob.draggable(true);
        lastDist = 0;
    }, false);


}

如何在 KineticJS 中的一组形状上使用缓存？

Answer 1

group.cache({
    width: blob.width(),
    height: blob.height(),
    x : blob.x(),
    y : blob.y(),
    drawBorder: true
  }).offset({
    x: 10,
    y: 10
  });

http://jsfiddle.net/k4Lsv73d/2/

您应该更好地配置 x、y、width 和 height 属性进行缓存。