angular-material+fabric实现简单的平面海报广告拖拽设计编辑器效果代码
代码语言：html
所属分类：其他
代码描述：angular-material+fabric实现简单的平面海报广告拖拽设计编辑器效果代码。
代码标签： angular material fabric 平面 海报 广告 设计 编辑器
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/angular-material.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/md-color-menu.css">
<style>
.property-box {
padding: 10px;
margin: 5px;
border: 1px solid gainsboro;
}
.colorbox {
width: 70px;
height: 35px;
border: 1px solid black;
}
.btn-sm {
min-width: 50px;
}
</style>
</head>
<body>
<div ng-app="app">
<div ng-controller="MainController as main" layout="row">
<div>
<canvas id="c"></canvas>
</div>
<div flex>
<h2 style="text-align: center;">工具箱</h2>
<div>
<md-button class="md-raised" ng-click="main.addText()">添加文字
</md-button>
<md-button class="md-raised" ng-click="main.addRect()">添加方块
</md-button>
<md-button class="md-raised" ng-click="main.addCircle()">添加圆
</md-button>
<md-button class="md-raised" ng-click="main.addTriangle()">添加三角形
</md-button>
<md-button class="md-raised" ng-click="main.addImage($event)">添加图片
</md-button>
<md-button class="md-raised md-warn" ng-click="main.remove()">删除
</md-button>
</div>
<div ng-show="main.activeObject" class="property-box">
<div ng-show="main.activeObject.type !== 'image'">
<md-color-menu color="main.color">
<div class="colorbox" ng-style="main.getStyle()">
</div>
</md-color-menu>
<span>Fill: {{main.activeObject.fill}}</span>
</div>
<div>
<md-slider-container>
<span>Opacity</span>
<md-slider ng-model="main.opacity" ng-change="main.setOpacity()" min="0" max="100" step="1" class="md-primary">
</md-slider>
<md-input-container>
<input ng-model="main.opacity" ng-change="main.setOpacity()" />
</md-input-container>
</md-slider-container>
</div>
<div layout="row">
<md-button class="md-raised btn-sm" ng-click="main.activeObject.bringForward()">↑
<md-tooltip md-direction="bottom">向前移一层</md-tooltip>
</md-button>
<md-button class="md-raised btn-sm" ng-click="main.activeObject.bringToFront()">⇑
<md-tooltip md-direction="bottom">移到最前面</md-tooltip>
</md-button>
<md-button class="md-raised btn-sm" ng-click="main.activeObject.sendBackwards()">↓
<md-tooltip md-direction="bottom">向后移一层</md-tooltip>
</md-button>
<md-button class="md-raised btn-sm" ng-click="main.activeObject.sendToBack()">⇓
<md-tooltip md-direction="bottom">移到最后面</md-tooltip>
</md-button>
</div>
</div>
<div ng-show="main.activeObject.type === 'i-text'" class="property-box">
<div>
<span>文字大小: {{ main.getFontSize() }}
</span><br />
<span>文字字体: {{main.activeObject.fontFamily}}
</span><br />
<span>对齐方式: {{main.activeObject.textAlign}}
</span><br />
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular.1.7.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular-animate.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular-aria.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/angular-material.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/fabric-3.6.6.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/md-color-menu.js"></script>
<script>
"use strict";
var app;
(function (app) {
class MainController {
constructor($scope, mdPickerColors, dlg) {
this.$scope = $scope;
this.mdPickerColors = mdPickerColors;
this.dlg = dlg;
this.initCanvas = () => {
this.canvas = new fabric.Canvas('c');
this.canvas.setDimensions({
width: window.innerWidth * 0.7,
height: window.innerHeight
});
this.canvas.setBackgroundColor('#565656', this.canvas.renderAll.bind(this.canvas));
// extra canvas settings
this.canvas.preserveObjectStacking = true;
this.canvas.stopContextMenu = true;
this.canvas.on('object:selected', () => {
this.$scope.$evalAsync(() => {
this.activeObject = this.canvas.getActiveObject();
this.color = this.mdPickerCol.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0