0
我是新角度和麪料js所以任何指針非常讚賞。我試圖構建一個用戶界面,用戶可以將對象拖放到畫布上,然後用線條將它們連接起來。使用面料js與Angular 4
實質上,我希望從第一個鏈接中獲得Angular4拖放示例,以便與第二個鏈接中找到的farbricjs畫布良好地配合。
拖放例如工作,但是fabricjs帆布在Chrome中呈現爲一個方盒子,僅此而已。任何想法非常感謝。
步驟我已經採取了:
在tsconfig.json我設置 「allowJs」:真
我dnd.component.html樣子:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script type="text/javascript" src="canvas.js"></script>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
<div class="container">
<div>
<simple-dnd></simple-dnd>
<canvas id="c" width="600" height="600"></canvas>
</div>
</div>
和帆布。 JS是這樣的:
setTimeout(function() {
$(document).ready(function() {
var canvas = new fabric.Canvas('c', {selection: false});
var grid = 50;
// create grid
for (var i = 0; i < (600/grid); i++) {
canvas.add(new fabric.Line([i * grid, 0, i * grid, 600], {stroke: '#ccc', selectable: false}));
canvas.add(new fabric.Line([0, i * grid, 600, i * grid], {stroke: '#ccc', selectable: false}))
}
// add objects
var rect = new fabric.Rect({
left: 100,
top: 100,
width: 247,
height: 309,
fill: '#9f9',
originX: 'left',
originY: 'top',
centeredRotation: true
});
canvas.add(rect);
var rect2 = new fabric.Rect({
left: 100,
top: 100,
width: 223,
height: 167,
fill: '#faa',
originX: 'left',
originY: 'top',
centeredRotation: true
});
canvas.add(rect2);
var rect3 = new fabric.Rect({
left: 196,
top: 334,
width: 150,
height: 75,
fill: 'blue',
originX: 'left',
originY: 'top',
centeredRotation: true
});
canvas.add(rect3);
canvas.renderAll();
});
}, 0);
一個問題,如果你不介意......當你導入'面料'你的代碼如何知道如何找到面料項目? – mba12