HTML5画布上拖拽一个图像

最新推荐文章于 2022-09-30 11:55:37 发布

limeiyans

最新推荐文章于 2022-09-30 11:55:37 发布

阅读量1k

点赞数

分类专栏： HTML5画布上拖拽一个图像文章标签： HTML5画布上拖拽一个图像

本文链接：https://blog.csdn.net/limeiyans/article/details/18367559

版权

HTML5画布上拖拽一个图像专栏收录该内容

1 篇文章 0 订阅

订阅专栏

与KineticJS拖拽一个图像,我们可以设置拖拽属性为true时实例化一个图像,或者我们可以使用setDraggable()方法。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.min.js"></script>
    <script defer="defer">
      function drawImage(imageObj) { 
        var stage = new Kinetic.Stage({
          container: "container",
          width: 578,
          height: 200
        });
        var layer = new Kinetic.Layer();

        // darth vader
        var darthVaderImg = new Kinetic.Image({
          image: imageObj,
          x: 100,
          y: 30,
          width: 200,
          height: 137,
          draggable: true
        });

        // add cursor styling
        darthVaderImg.on('mouseover', function() {
          document.body.style.cursor = 'pointer';
        });
        darthVaderImg.on('mouseout', function() {
          document.body.style.cursor = 'default';
        });

        layer.add(darthVaderImg);
        stage.add(layer);
      }
      var imageObj = new Image();
      imageObj.onload = function() {
        drawImage(this);
      };
      imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

    </script>
  </body>
</html>

limeiyans

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布上拖拽一个图像

与KineticJS拖拽一个图像,我们可以设置拖拽属性为true时实例化一个图像,或者我们可以使用setDraggable()方法。 body { margin: 0px; padding: 0px; } function drawImage(imageOb
复制链接

扫一扫

专栏目录