обрезать изображение другим слоем

0

У меня два слоя на кинетической стадии, один из них - это граница с другим изображением. Я хочу обрезать изображение по границе и не иметь границы на конечном изображении. Пример 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

Теги:
kineticjs

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню