[英]Fabric.js - Attach object creation to mouse click
創建新的結構對象時,可以指定其在畫布上顯示的位置。 有沒有一種方法可以將生成的對象附加到鼠標,然后將其放置在單擊(或觸摸)上?
例如,生成在畫布上顯示的圓圈的方法。
var circle = new fabric.Circle({
radius: 20, fill: 'green', left: 100, top: 100
});
更新對象的位置以使其與鼠標的位置相匹配是很容易的,並且在mouse:up
克隆該對象並將其放置在畫布上。
var canvas = new fabric.Canvas('c'); var mousecursor = new fabric.Circle({ left: 0, top: 0, radius: 5, fill: '#9f9', originX: 'right', originY: 'bottom', }) canvas.add(mousecursor); canvas.on('mouse:move', function(obj) { mousecursor.top = obj.ey - mousecursor.radius; mousecursor.left = obj.ex - mousecursor.radius; canvas.renderAll() }) canvas.on('mouse:out', function(obj) { // put circle off screen mousecursor.top = -100; mousecursor.left = -100; canvas.renderAll() }) canvas.on('mouse:up', function(obj) { canvas.add(mousecursor.clone()) canvas.renderAll() })
canvas { border: 1px solid #ccc; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script> <canvas id="c" width="600" height="600"></canvas>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.