0

我在 kineticjs 阶段有两层，其中一层是另一张图像的边框我想通过边框裁剪图像，并且在最终图像上没有边框附加了一个 jsfiddle 示例我只想保留内部图像（背包）

var scale = 1;
var origwidth = 280;
var origheight = 302;
var ratio = origwidth/origheight;
var newwidth = 300;
var newheight = newwidth/ratio;
var stage = new Kinetic.Stage({
    container: 'photouploaded',
    width: newwidth,
    height: newheight
  });
  var uploaded;
  var mask;
  var layer = new Kinetic.Layer();
  var mlayer = new Kinetic.Layer();
  var imageObj = new Image();
  var maskObj = new Image();
  mask = new Kinetic.Image({
      x: 0,
      y: 0,
      image: maskObj,
      width: newwidth,
      height: newheight,
      listening: false
    });
   uploaded = new Kinetic.Image({
      x: (mask.attrs.width / 2) + 15,
      y: (mask.attrs.height / 2) + 15,
      image: imageObj,
      width: 270,
      height: 270,
      offset: [135,135],
      draggable: true
    });
  imageObj.onload = function() {
    layer.add(uploaded);
    mlayer.add(mask);
    stage.add(layer);
    stage.add(mlayer);  
  };
  imageObj.src = 'base64 of photo';
  maskObj.src = 'base64 of photo';

jsfiddle

4

1 回答 1

1

然后根本不画边界，只是clip在舞台上设置一个。

任何抽奖（如您的背包​​图像）只会出现在舞台的剪辑区域内。

// set variables to create a clipping region on the stage
// in this example, the clipping area will be a rectangle
// at x=75, y=50 with width=100 and height=200

var clipLeft=75;
var clipTop=50;
var clipWidth=100;
var clipHeight=200;

var stage = new Kinetic.Stage({
    container: 'photouploaded',
    width: newwidth,
    height: newheight,
    clip:[clipLeft,clipTop,clipWidth,clipHeight]
  });

// Now any drawings/images will only be visible inside the clipping region
于 2013-11-10T22:31:47.937 回答