HTML5：Canvas复杂的拖拽和KineticJS界限教程

最新推荐文章于 2024-03-25 12:20:51 发布

fanyilins

最新推荐文章于 2024-03-25 12:20:51 发布

阅读量1.2k

点赞数

分类专栏： Canvas复杂的拖拽和KineticJS界限教程文章标签： Canvas复杂的拖拽和KineticJ

本文链接：https://blog.csdn.net/fanyilins/article/details/12918301

版权

本文介绍了如何在HTML5的Canvas中实现复杂的拖拽功能，并结合KineticJS库，让元素在特定边界内移动。通过示例展示了如何创建一个矩形，使其在y坐标50的位置下无法超出边界，以及另一个矩形在圆形区域内限制拖动。

摘要由CSDN通过智能技术生成

限制的移动节点被拖掉KineticJS内部地区,我们可以使用dragBoundFunc属性定义的边界节点不能交叉。

产品说明:拖放浅蓝色矩形和观察,它必然低于一个假想边界在y = 50。拖放黄色矩形和观察,它必然在一个假想的圆。

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

        // bound below y=50
        var blueGroup = new Kinetic.Group({
          x: 100,
          y: 70,
          draggable: true,
          dragBoundFunc: function(pos) {
            var newY = pos.y < 50 ? 50 : pos.y;

最低0.47元/天解锁文章

fanyilins

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML5：Canvas复杂的拖拽和KineticJS界限教程

限制的移动节点被拖掉KineticJS内部地区,我们可以使用dragBoundFunc属性定义的边界节点不能交叉。产品说明:拖放浅蓝色矩形和观察,它必然低于一个假想边界在y = 50。拖放黄色矩形和观察,它必然在一个假想的圆。 body { margin: 0px; padding: 0px; }
复制链接

扫一扫