在鼠标上添加和删除类进入和离开画布形状

时间：2017-11-23 08:49:18

标签： javascript jquery css canvas konvajs

我试图在鼠标悬停在元素上时向元素添加一个类，然后在鼠标离开时将其删除。它目前只在js中提供直接样式。

如下所示，我尝试了各种方法来做到这一点，都有一些问题。只有直接的风格改变才有效。在鼠标离开时，我会做同样的事情，但删除课程。鼠标悬停并离开检查画布元素。

private enum HitType
    {
        None, Body, UL, UR, LR, LL, L, R, T, B
    };
private bool DragInProgress = false;
private Point LastPoint;
HitType MouseHitType = HitType.None;
Ellipse elip = new Ellipse();
private Point anchorPoint;
private bool is_drawing = false;

public MainWindow()
    {
        InitializeComponent();            
    }

private HitType SetHitType(Ellipse ellips, Point point)
    {
        double left = Canvas.GetLeft(ellips);
        double top = Canvas.GetTop(ellips);
        double right = left + ellips.Width;
        double bottom = top + ellips.Height;
        if (point.X < left) return HitType.None;
        if (point.X > right) return HitType.None;
        if (point.Y < top) return HitType.None;
        if (point.Y > bottom) return HitType.None;

        const double GAP = 10;
        if (point.X - left < GAP)
        {
            if (point.Y - top < GAP) return HitType.UL;
            if (bottom - point.Y < GAP) return HitType.LL;
            return HitType.L;
        }
        if (right - point.X < GAP)
        {
            if (point.Y - top < GAP) return HitType.UR;
            if (bottom - point.Y < GAP) return HitType.LR;
            return HitType.R;
        }
        if (point.Y - top < GAP) return HitType.T;
        if (bottom - point.Y < GAP) return HitType.B;
        return HitType.Body;
    }

private void SetMouseCursor()
    {
        Cursor desired_cursor = Cursors.Arrow;
        switch (MouseHitType)
        {
            case HitType.None:
                desired_cursor = Cursors.Arrow;
                break;
            case HitType.Body:
                desired_cursor = Cursors.Hand;
                break;
            case HitType.UL:
            case HitType.LR:
                desired_cursor = Cursors.SizeNWSE;
                break;
            case HitType.LL:
            case HitType.UR:
                desired_cursor = Cursors.SizeNESW;
                break;
            case HitType.T:
            case HitType.B:
                desired_cursor = Cursors.SizeNS;
                break;
            case HitType.L:
            case HitType.R:
                desired_cursor = Cursors.SizeWE;
                break;
        }

        if (Cursor != desired_cursor) { Cursor = desired_cursor; }
        canvas.Cursor = desired_cursor;
    }

private void canvas_PreviewMouseDown(object sender, MouseButtonEventArgs e)
    {
        if (e.Source is Ellipse)
        {
            elip = e.Source as Ellipse;
            MouseHitType = SetHitType(elip, Mouse.GetPosition(canvas));
            if (MouseHitType == HitType.None) return;
            LastPoint = Mouse.GetPosition(canvas);
            DragInProgress = true;
        }
        else
        {
            is_drawing = true;
            anchorPoint = e.MouseDevice.GetPosition(canvas);
            elip = new Ellipse
            {
                Stroke = Brushes.Black,
                StrokeThickness = 2,
                Fill = Brushes.Transparent
            };
            canvas.Children.Add(elip);
        }
    }

private void canvas_PreviewMouseMove(object sender, MouseEventArgs e)
    {
        if (!DragInProgress)
        {
            MouseHitType = SetHitType(elip, Mouse.GetPosition(canvas));
            SetMouseCursor();

            if (!is_drawing)
                return;

            Point location = e.MouseDevice.GetPosition(canvas);

            double minX = Math.Min(location.X, anchorPoint.X);
            double minY = Math.Min(location.Y, anchorPoint.Y);
            Double maxX = Math.Max(location.X, anchorPoint.X);
            Double maxY = Math.Max(location.Y, anchorPoint.Y);

            Canvas.SetTop(elip, minY);
            Canvas.SetLeft(elip, minX);

            double height = maxY - minY;
            double width = maxX - minX;

            elip.Height = Math.Abs(height);
            elip.Width = Math.Abs(width);
        }
        else
        {
            Point point = Mouse.GetPosition(canvas);
            double offset_x = point.X - LastPoint.X;
            double offset_y = point.Y - LastPoint.Y;

            double new_x = Canvas.GetLeft(elip);
            double new_y = Canvas.GetTop(elip);
            double new_width = elip.Width;
            double new_height = elip.Height;

            switch (MouseHitType)
            {
                case HitType.Body:
                    new_x += offset_x;
                    new_y += offset_y;
                    break;
                case HitType.UL:
                    new_x += offset_x;
                    new_y += offset_y;
                    new_width -= offset_x;
                    new_height -= offset_y;
                    break;
                case HitType.UR:
                    new_y += offset_y;
                    new_width += offset_x;
                    new_height -= offset_y;
                    break;
                case HitType.LR:
                    new_width += offset_x;
                    new_height += offset_y;
                    break;
                case HitType.LL:
                    new_x += offset_x;
                    new_width -= offset_x;
                    new_height += offset_y;
                    break;
                case HitType.L:
                    new_x += offset_x;
                    new_width -= offset_x;
                    break;
                case HitType.R:
                    new_width += offset_x;
                    break;
                case HitType.B:
                    new_height += offset_y;
                    break;
                case HitType.T:
                    new_y += offset_y;
                    new_height -= offset_y;
                    break;
            }

            if ((new_width > 0) && (new_height > 0))
            {
                Canvas.SetLeft(elip, new_x);
                Canvas.SetTop(elip, new_y);
                elip.Width = new_width;
                elip.Height = new_height;
                LastPoint = point;
            }
        }
    }

private void canvas_PreviewMouseUp(object sender, MouseButtonEventArgs e)
    {
        if (DragInProgress)
            DragInProgress = false;
        if (is_drawing)
        {
            is_drawing = false;
            elip.Stroke = Brushes.Black;
            elip.StrokeThickness = 2;
            elip.Fill = Brushes.Transparent;
        }
    }

我不确定问题是什么，因为我厌倦了添加类所有不同问题的类的各种方法。仅使用poly.on('mouseover', function () { this.opacity(1); layer.draw(); $('.' + this.name()).css({ backgroundColor: "#ffcc00" }); //$('.' + this.name()).classList.add("textboxhighlight"); //$('.' + this.name()).className += " textboxhighlight"; //$('.' + this.name()).addClass("textboxhighlight"); //$('.' + this.name()).setAttribute("class", "textboxhighlight"); }); 不能正常工作，因为它需要以this.addClass开头，或者代码中的任何内容都不起作用，甚至不会强制样式部分。 $('.' + this.name())指的是元素中与poly。同名的类名。

在css中：

$('.' + this.name())

感谢您的帮助。

4 个答案:

答案 0 :(得分：0)

如果您提供了更多代码，那将会更容易。下面的示例将说明如何在悬停时添加类，并在离开元素时删除类。

$('#element').hover(function(e) {
  $(this).addClass('selected');
}, function(a) {
  $(this).removeClass('selected');
});
.selected {
  background-color: green;
}
<div id='element'>
  element
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

答案 1 :(得分：0)

当您不显示代码的mouseenter / leave部分时，很难说代码出了什么问题。但这是一个类的例子： https://codepen.io/andeersg/pen/MOGqPQ 

$('.el').mouseenter(function() {
  $(this).addClass('el-hover');
});
$('.el').mouseleave(function() {
  $(this).removeClass('el-hover');
});

答案 2 :(得分：0)

您可能需要在css类background-color: #red !important中使用。请参阅工作示例here

答案 3 :(得分：0)

您可以在悬停事件

上使用toggleClass

＆＃13;
＆＃13; 
$(".hoverclass").hover(function () {
    $(this).toggleClass("hoverclass_toggle");
});
＆＃13; 
 .hoverclass {
     height: 72px;
     width: 100%;
     border: 1px solid #000;
 }
 .hoverclass_toggle {
     background-color: #000;
 }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
    <div class="item">
        <div id="item1"> <i class="icon"></i>Test</div>
    </div>
    <div>
＆＃13;
＆＃13;
＆＃13;

否则你可以这样做：

＆＃13;
＆＃13; 
$(".hoverclass").hover(
  function () {
    $(this).addClass("result_hover");
  },
  function () {
    $(this).removeClass("result_hover");
  }
);
＆＃13; 
 .hoverclass {
    height: 72px;
    width: 100%;
    border: 1px solid #000;
  }
  .result_hover {
    background-color: #000;
  }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
  <div class="item">
    <div id="item1">
      <i class="icon"></i>Test
    </div>
  </div>
<div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题