画面上に長方形を作成し、マウスオーバーすると長方形にいくつかのボタンが表示されるようにします。しかし、私はこの仕事を扱うことができませんでした。私のコードは以下です。その理由が理解できなかった
this.$('.control').removeClass('hide');
この行は機能していません。エラーも発生しません。
$(this.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();
});