backbone.js 如何在Javascript中将鼠标悬停在矩形上?

wvyml7n5  于 2022-11-24  发布在  Java
关注(0)|答案(1)|浏览(141)

我在屏幕上创建了一个矩形,我想在鼠标悬停时在矩形上显示一些按钮。但是我无法处理这个工作。我的代码如下。我不明白为什么

this.$('.control').removeClass('hide');

此行不起作用。它也不会给予任何错误。
(此处为.rect).html(........................ css({位置:'绝对',填充:“10px”});
我也不明白我的代码的这一部分。(堆栈不允许的div。我不知道为什么)。

var KineticModel = Backbone.Model.extend({
    myRect: null,

    createRect : function() {
            alert("rectangle created.");
            var rect=new Kinetic.Rect({
                            x: 50,
                            y: 50,
                            width: 150,
                            height: 150,
                            fill: 'green',
                            stroke: 'black',
                            strokeWidth: 1,
                            offset: [0, 0],
                            draggable: true,
                      });
            rect.on("mouseover",function(){
                alert("Hoover : ");
                $('.control').removeClass('hide');
            });
            rect.on("mouseout",function(){
                alert("Out : ");
            });
            rect.on("mousedown",function(){
                alert("Down : ");
            });
            rect.on("mouseup",function(){
                alert("Up : ");
            });
            return rect;
        }
});

var KineticView = Backbone.View.extend({
        tagName: 'span',
        stage: null,
        layer: null,

        initialize: function (options) {
            model: options.model;
            el: options.el;
            this.layer = new Kinetic.Layer();
            this.stage = new Kinetic.Stage({ container: this.el, width: 1000, height: 500 });
            this.stage.add(this.layer);
        },
        events: {
            'click': 'spanClicked'
        },
        render: function () {
            var rect = this.model.createRect();
            $(this.rect).html('<div class="shape"/>'
             + '<div class="control delete hide"/>'
             + '<div class="control change-color hide"/>'
             + '<div class="control resize hide"/>'
             + '<div class="control rotate hide"/>').css({ position: 'absolute', padding: '10px' });
            this.layer.add(rect);
            this.stage.add(this.layer);
            alert("render");
            return this;
        },
        spanClicked: function () {
            
        }
});

var kModel = new KineticModel({});
var kView = new KineticView({ el: '#container', model: kModel });

$('#shapetest').click(function() {
    kView.render();
});
rggaifut

rggaifut1#

this.$('.control').removeClass('hide');更改为:

$('.control').removeClass('hide');

等等......

相关问题