Question

我试图通过kineticjs保持图像上的文字。但最初我能够在拖动图像文本后将图像保留在图像上。谁可以帮我这个事。这是我的小提琴，

＆＃13;

$(document).ready(function()
                  {
var startAngle = 0;
var minImgSize = 10;

function update(activeAnchor)
{
    var group = activeAnchor.getParent();

    var topLeft = group.get('.topLeft')[0];
    var topRight = group.get('.topRight')[0];
    var bottomRight = group.get('.bottomRight')[0];
    var bottomLeft = group.get('.bottomLeft')[0];
    
    var rotateAnchor = group.get('.rotateAnchor')[0];
    var image = group.get('Image')[0];
    
    var anchorX = activeAnchor.getX();
    var anchorY = activeAnchor.getY();
    var imageWidth = image.getWidth();
    var imageHeight = image.getHeight();
    
        // update anchor positions
        switch (activeAnchor.getName()) {
            case 'rotateAnchor':

                break;
            case 'topLeft':
                topRight.setY(anchorY);     
                bottomLeft.setX(anchorX);           
                break;       
            case 'topRight':
                topLeft.setY(anchorY); 
                bottomRight.setX(anchorX);           
                break;       
            case 'bottomRight':            
                topRight.setX(anchorX);
                bottomLeft.setY(anchorY);          
                break;        
            case 'bottomLeft':
                topLeft.setX(anchorX);
                bottomRight.setY(anchorY);         
                break;        
        }
        
        if (topRight.getX() < topLeft.getX() + minImgSize)
        {
            topRight.setX(topLeft.getX() + minImgSize);
        }
        if (bottomRight.getX() < topLeft.getX() + minImgSize)
        {
            bottomRight.setX(topLeft.getX() + minImgSize);
        }
        if (bottomRight.getY() < topLeft.getY() + minImgSize)
        {
            bottomRight.setY(topLeft.getY() + minImgSize);
        }
        if (bottomLeft.getY() < topLeft.getY() + minImgSize)
        {
            bottomLeft.setY(topLeft.getY() + minImgSize);
        }
    
        var width = topRight.getX() - topLeft.getX();
        var height = bottomLeft.getY() - topLeft.getY();

    image.setPosition({x : topLeft.getPosition().x, y:(topLeft.getPosition().y)});
        image.setWidth(width);
        image.setHeight(height);
        
        rotateAnchor.setX(width / 2 + topLeft.getX());
        rotateAnchor.setY(height / 2 + topLeft.getY());

}


function addAnchor(group, x, y, name, dragBound)
{
    var stage = group.getStage();
    var layer = group.getLayer();
    var groupPos = group.getPosition();
    
    var anchor = new Kinetic.Circle({
      x: x,
      y: y,
      stroke: '#666',
      fill: '#ddd',
      strokeWidth: 2,
      radius: 6,
      name: name,
      draggable: true,
      dragOnTop: false
    });
    
    
    if (dragBound == 'rotate')
    {
      startAngle = angle(groupPos.x, groupPos.y, x + groupPos.x, y + groupPos.y);

      anchor.setAttrs({
        dragBoundFunc: function (pos) {
            return getRotatingAnchorBounds(pos, group);
        }
      });
    }
    
    
    anchor.on('dragmove', function() {
      update(this);
      layer.draw();
    });
    anchor.on('mousedown touchstart', function() {
      group.setDraggable(false);
      this.moveToTop();
    });
    anchor.on('dragend', function() {
      group.setDraggable(true);
      layer.draw();
    });
    // add hover styling
    anchor.on('mouseover', function() {
      var layer = this.getLayer();
      document.body.style.cursor = 'pointer';
      this.setStrokeWidth(4);
      layer.draw();
    });
    anchor.on('mouseout', function() {
      var layer = this.getLayer();
      document.body.style.cursor = 'default';
      this.setStrokeWidth(2);
      layer.draw();
    });
   
    group.add(anchor); 
}
      
      
function loadImages(sources, callback)
{
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = sources[src];
    }
}


function radians (degrees) {return degrees * (Math.PI/180)}
function degrees (radians) {return radians * (180/Math.PI)}
function angle (cx, cy, px, py) {var x = cx - px; var y = cy - py; return Math.atan2 (-y, -x)}
function distance (p1x, p1y, p2x, p2y) {return Math.sqrt (Math.pow ((p2x - p1x), 2) + Math.pow ((p2y - p1y), 2))}


function getRotatingAnchorBounds(pos, group)
{
    var groupPos = group.getPosition();
    var rotation = degrees (angle (groupPos.x, groupPos.y, pos.x, pos.y) - startAngle);
    var dis = distance (groupPos.x, groupPos.y, pos.x, pos.y);
    console.log('x: ' + pos.x + '; y: ' + pos.y + '; rotation: ' + rotation + '; distance:' + dis);
    group.setRotationDeg (rotation);
    return pos;
}

      
function initStage(images)
{
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
      height: 400
    });
    
    var darthVaderGroup = new Kinetic.Group({
      x: 270,
      y: 100,
      draggable: true,
      fill: 'black'
    });
    
    var layer = new Kinetic.Layer();
    var sw = stage.getWidth();
	var sh = stage.getHeight();
    var text = new Kinetic.Text({
		x: 100,
		y: 100,
		text: "Gowtham",
		fontSize: 32,
		fontFamily: "Arial",
		fill: "black",
		stroke: "white",
		strokeWidth: 1,
		draggable: true,
		dragBoundFunc: function (pos) {
	        var w = this.getWidth();
	        var h = this.getHeight();
	        if (pos.x < 0) {
	            pos.x = 0;
	        }
	        if (pos.x + w > sw) {
	            pos.x = sw - w;
	        }
	        if (pos.y < 0) {
	            pos.y = 0;
	        }
	        if (pos.y + h > sh) {
	            pos.y = sh - h;
	        }
	        return {
	            x: pos.x,
	            y: pos.y
	        }
	    }
	});
    layer.add(darthVaderGroup);
    stage.add(layer);
    
		layer.add(text);
    layer.draw();
    var darthVaderImg = new Kinetic.Image({
      x: 0,
      y: 0,
      image: images.darthVader,
      width: 200,
      height: 138,
      name: 'image'
    });
    
    darthVaderGroup.add(darthVaderImg);
    addAnchor(darthVaderGroup, 0, 0, 'topLeft', 'none');
    addAnchor(darthVaderGroup, darthVaderImg.getWidth(), 0, 'topRight', 'none');
    addAnchor(darthVaderGroup, darthVaderImg.getWidth(), darthVaderImg.getHeight(), 'bottomRight', 'none');
    addAnchor(darthVaderGroup, 0, darthVaderImg.getHeight(), 'bottomLeft', 'none');
    addAnchor(darthVaderGroup, darthVaderImg.getWidth() / 2, darthVaderImg.getHeight() / 2, 'rotateAnchor','rotate');
    
    darthVaderGroup.on('dragstart', function() {
      this.moveToTop();
    });
    
    stage.draw();
}

var sources = {
    darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'
};

loadImages(sources, initStage);



                  });

＆＃13;

canvas
{
   border: 1px solid #aaa;
   -moz-box-shadow: 3px 3px 8px #222;
   -webkit-box-shadow: 3px 3px 8px #222;
   box-shadow: 3px 3px 8px #222;
}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
<div id="container"></div>
<button id="addImage">Add
</button>

＆＃13;

如何在kineticjs中保留图像上的文字

0 个答案: