Question

我在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

Answer 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

通过其他图层裁剪图像

1 个答案: