<!DOCTYPE html>
<html>
<head>
<script data-require="vue-router@*" data-semver="0.7.1" src="https://cdn.jsdelivr.net/vue.router/0.7.1/vue-router.min.js"></script>
<script data-require="backbone.js@*" data-semver="1.3.3" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script data-require="vue.js@*" data-semver="10.0.26" src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
<script data-require="vue-resource@*" data-semver="0.9.3" src="https://cdn.jsdelivr.net/vue.resource/0.9.3/vue-resource.min.js"></script>
<script data-require="redux@*" data-semver="3.2.1" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.2.1/redux.js"></script>
<script data-require="fabricJs@*" data-semver="1.7.7" src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script data-require="Anime.js@2.2.0" data-semver="2.2.0" src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js."></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>FABRIC JS</h1>
<h3>-double click to add keyframe</h3>
<h3>-double click to remove keyframe</h3>
<canvas id="fabric-canvas" width="400px" height="300px"></canvas>
<div id="container" class="layer-container">
<frame-layer class="frame-layer"></frame-layer>
<frame-layer class="frame-layer"></frame-layer>
<frame-layer class="frame-layer"></frame-layer>
<frame-layer class="frame-layer"></frame-layer>
<frame-layer class="frame-layer"></frame-layer>
<animation-controller v-bind:animationdata="animationDataList"></animation-controller>
</div>
<script type="text/x-template" id="framelayer">
<div>
<framer v-bind:otheri="selectedFrame" v-on:keyed="showInfoKeyFrame" v-on:not-keyed="showInfoNotKeyFrame" v-on:clickie="setSelectedFrame" v-bind:keyed="list_f[f]" v-bind:index="f" v-bind:key="f" v-for="f in frameCount">
</framer>
<div v-if="keyedInfoVis">
<label>Label:
<input v-model:value="dataFrame.label" type="text" />
</label>
<label>Type:
<input v-model:value="dataFrame.type" type="text" />
</label>
<label>Count:
<input v-model:value="dataFrame.count" type="text" />
</label>
</div>
</div>
</script>
<script type="text/x-template" id="framer">
<span v-bind:class="{framer:true,selected:computedSelected}" v-on:click="addKeyFrame">
<span class="key " v-if="keyed">
<component v-if="label===''">○</component>
<component v-else>●</component>
</span>
</span>
</script>
<script type="text/x-template" id="runer">
<div>
<button v-on:click.native="runAnimation">Play</button>
<button>Pause</button>
<button>Stop</button>
</div>
</script>
<script data-require="requirejs@*" data-semver="2.3.2" src="http://requirejs.org/docs/release/2.3.2/minified/require.js" data-main="main.js"></script>
<script>
var canvas = new fabric.Canvas('fabric-canvas');
// create a rectangle object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
});
// "add" rectangle onto canvas
canvas.add(rect);
Vue.component('animation-controller', {
props: {
animationdata: Array
},
data: function() {
return {
currentFrame: -1
}
},
template: '#runer',
methods: {
runAnimation: function() {
for(x in this.animationdata){
console.log(x)
}
this.currentFrame+=1;
var me =this;
function runer() {
console.log("start animate");
rect.animate(this.animationdata[this.currentFrame].type,
this.animationdata[this.currentFrame].count, {
onChange: canvas.renderAll.bind(canvas),
duration: 1000,
easing: fabric.util.ease.easeOutBounce
});
this.currentFrame+=1;
if (this.animationdata.length-1 === this.currentFrame) {
} else {
setTimeout(runer.bind(this), 1000);
}
}
setTimeout(runer.bind(this), 1000);
}
}
});
Vue.component('null-frame', {
});
Vue.component('framer', {
props: {
keyed: Boolean,
selected: Boolean,
index: Number,
otheri: Number
},
computed: {
computedSelected: function() {
//console.log(index===otheri)
if (this.index === this.otheri)
return true;
return false;
}
},
methods: {
addKeyFrame: function() {
console.log(this.keyed)
var me = this;
if (!this.justClicked) {
this.justClicked = true;
setTimeout(function() {
me.justClicked = false;
}, 400)
} else {
console.log(this.keyed)
this.keyed = !this.keyed;
//this.$emit('keyed', this.$data);
}
if (this.keyed) {
this.$emit('keyed', this.$data);
} else {
this.$emit('not-keyed', this.$data);
}
this.$emit('clickie', this.index)
}
},
data: function() {
return {
justClicked: false,
label: "",
thing: 0,
count:0,
type:""
}
},
template: '#framer'
})
Vue.component('frame-layer', {
template: '#framelayer',
computed: {
computeSelectedFrame: function(idx) {
console.log("compute...")
if (idx == selectedFrame) {
console.log("selected on" + this.selectedFrame)
return true;
} else return false;
}
},
methods: {
setSelectedFrame: function(data) {
console.log(data);
this.selectedFrame = data;
},
showInfoNotKeyFrame: function(data) {
console.log("not keyed");
this.keyedInfoVis = false;
},
showInfoKeyFrame: function(data) {
console.log(data)
this.keyedInfoVis = true;
this.dataFrame = data;
}
},
data: function() {
return {
frameCount: 50,
frameAll: 100,
selectedFrameList: [],
selectedFrame: -1,
keyedInfoVis: false,
notKeyedInfoVis: false,
dataFrame: {
label: "",
thing: 0,
name: "",
count:0,
type:""
},
nama: "joni",
list_f: []
}
}
})
var app = new Vue({
el: "#container",
data:{
animationDataList:[]
}
})
</script>
<style>
canvas {
border: 1px solid #444;
}
html,body {
background-color: #678;
height:100%;
width:100%;
}
.layer-container{
width:100%;
position:fixed;
overflow:auto;
bottom:0;
background-color:#333;
}
.frame-layer{
width:100%;
overflow:hidden;
}
.framer {
width: 7px;
height: 15px;
overflow: hidden;
display: inline-block;
border: 1px solid black;
cursor: pointer;
background-color: #fff;
}
.framer:hover {
background-color: #eeee33;
}
.key {
position: absolute;
font-size: 9px;
display: inline color: red;
}
.selected {
background-color: red;
border: 1px solid red !important;
}
</style>
</body>
</html>
// Code goes here
/* Styles go here */
"use strict";
requirejs.config({
paths:{
"vue":""
},
config:{}
}
);
define(['vue'],function(Vue){
var v = new Vue({
el:"#container",
data:{
nama:"joni"
}
})
});
<template>
</template>
<script>
</script>