Question

我目前有一些javascript从变量接收图像并将其加载到画布中。画布在div中，以便使用kineticjs。我使用以下代码加载正六边形：

function MakeShape()
  {
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 490,
    height: 225
  });
  var polyLayer = new Kinetic.Layer();

var hexagon = new Kinetic.RegularPolygon({
    x: stage.width()/2,
    y: stage.height()/2,
    sides: 6,
    radius: 70,
    fill: 'red',
    offset: {
      x: 100,
      y: 0
    },
    draggable: true
  });

  polyLayer.add(hexagon);
    stage.add(polyLayer);
  }

但是，加载时，当我希望形状位于图像上方时，图层会接收画布的背景。我是否必须将图像绘制到图层以及形状上？在形状之前加载图像时我该怎么做？感谢。

Answer 1

我不确定你的意思是“javascript从变量接收图像并将其加载到Canvas中”。我猜你的Canvas元素被分配了一个background-image ==那个图像。

无论如何，new Kinetic.Stage加new Kinetic.Layer将创建一个涵盖container元素的新画布。因此，你在Div和Canvas中放置的任何图像都将被KineticJS创建的新Canvas覆盖。

底线...是的，将图像绘制到图层上（使用new Kinetic.Image）并使用图像消除Canvas元素。

祝你的项目好运！

[已添加示例代码]

var stage = new Kinetic.Stage({
  container: 'container',
  width: 490,
  height: 225
});
var polyLayer = new Kinetic.Layer();
stage.add(polyLayer);

var hexagon,image1;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/nightscape.jpg";
function start(){

  // add the image first
  // It's z-index will be lower then the hexagon's z-index
  // so the hexagon will be drawn over the image
  image1=new Kinetic.Image({
    x:0,
    y:0,
    image:img,
  });
  polyLayer.add(image1);
  
  hexagon = new Kinetic.RegularPolygon({
    x: stage.width()/2,
    y: stage.height()/2,
    sides: 6,
    radius: 70,
    fill: 'red',
    offset: {
      x: 100,
      y: 0
    },
    draggable: true
  });
  polyLayer.add(hexagon);



  polyLayer.draw();

}

body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:490px;
  height:225px;
}

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<h4>Background image with draggable hex on top.</h4>
<div id="container"></div>

制作没有背景的kineticjs图层

1 个答案: