4

我在屏幕上创建了一个矩形，当鼠标悬停在矩形上时，我希望一些按钮出现在矩形上。但我无法处理这项工作。我的代码如下。我不明白为什么

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

这一行不工作。它也没有给出任何错误。

$(this.rect).html(........css({ position: 'absolute', padding: '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();
});
4

1 回答 1

5

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

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

等等 ...

于 2013-03-20T16:42:54.480 回答